解决方案1:
p> 首先你要在html页面头部加上下面的代码;viewport",不懂可以百度;content=",一些小的模块可以用固定尺寸;meta , name="。再就是css中要应用到媒体查询,不能不用固定尺寸。
</>,其次你要把页面中的宽度修改为百分比;width=device-width; ,也就是@media;initial-scale=1"
解决方案2:
建议你看一下网上的教程或者案例,自己对比学习再写。
建议:如果是小白的话,要不然不会自适应屏幕大小的,只要你编写的html代码符合html5规则就行html5不是转化的,建议你看一下html5标签文档
解决方案3:
看你之前是怎么做的,最好都调整成百分比的,这样最省事。
html里,如果让背景图片根据屏幕大小铺满屏幕,不重复?
css3支持,background-size:cover
html页面 自适应pc端 屏幕大小 怎么设置
使用媒体查询,参考bootstrap里面的设置,或者直接使用bootstrap框架吧,根据浏览器的宽度自动设置宽度的
媒体查询代码实例
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
网页要让它自适应各种手机屏幕宽度大小要怎么设置?
在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9
不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。
只能指定百分比宽度
相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
怎么制作html5网站页面让它适应电脑和手机的尺寸
媒体查询语法:
@media screen and (max-width:960px){...}
@media screen and (max-width:768px){...}
@media screen and (max-width:320px){...}
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="800wide-portrait-screen.css" />
注意:1,媒体查询之间使用逗号隔开;2,在projection之后,没有and,也没有任何特性/值的组合。没有后续表达式,意味着只要是projection就满足条件。
@media screen and (max-device-width:400px){......}
@import url("~~.css") screen and (max-width:360px);
(@import方法会增加http请求,影响加载速度。)
媒体查询能检测的特性(最长用过的是设备的视口宽度(width)和屏幕宽度(device-width)):
widht:视口宽度
height:视口高度
device-width:渲染表面的宽度(设备屏幕的宽度)
device-height:渲染表面的高度(设备屏幕的高度)
orientation:检查设备处于横向还是纵向。
aspect-ratio:基于视口宽度和高度的宽高比。(16:9的显示屏可以定义为aspect-ratio:16/9)
device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度和高度的宽高比。
color:每种颜色的位数。例:min-color:16会检测设备是否拥有16位颜色。
color-index:色板的颜色索引表中的颜色数。值必须是非负数。
monochrom:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数。
resolution:用来检测屏幕或打印机的分辨率,如min-resolution:300dpi。还可以接受每厘米像素点数的度量值,如min-resolution:118dpcm。
scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p p表示逐行扫描。
grid:用来检测输出设备是网格设备还是位图设备。
在上述所有特性中,除scan和grid之外,都可以使用min和max前缀来创建一个查询范围。例如:
@import url("~~.css") screen and (min-width:200px) and (max-width:360px);这样~~.css只会引入视口宽度介于200px至360px的显示屏设备。
在样式表的开头位置设置样式,以便适应所有涉及,然后使用媒体查询来进一步重写响应的部分。例如,先针对大视口设计(用户大多数情况下使用鼠标),将导航链接设计成简单的文字链接;然后再针对较小的视口,使用媒体查询重写这部分样式,为拇指一族提供更大点击区域。
使用多个独立的文件会增加http请求数量,建议在已有的样式表中追加媒体查询样式。(https://github.com/scottjehl/Respond)是为IE8及更低版本增加媒体查询支持的最快的js工具。
阻止移动浏览器自动调整页面大小:
在html的<head>中插入一个<meta>标签。<meta>标签中可以设置具体的宽度(如px)或者缩放比例(如2.0 设备实际尺寸的两倍)。例如:<meta name="viewport" content="initial-scale=2.0,width=device-width">
<meta>标签还可以控制页面可缩放的范围,下面的代码允许用户将页面最多放大至设备宽度的3倍,最小压缩至设备宽度的一半。<meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5">
还可以禁止用户缩放,不过缩放是一个重要的辅助功能,所以很少禁用。<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> user-scalable=no即禁止缩放。
w3c正尝试使用@viewport声明,不用在<head>中添加<meta>,不过要使用私有前缀,如@-o-viewport{width:320px}
针对不同视口宽度修正设计:
首先在css中为平板设备增加媒体查询,数值ipad的视口宽度为768px(横向1024px)
@media screen and (max-width:768px){
#wrapper{
widht:768px;
}
#header,#footer,#nav {
width:748px;
}
}
=============================这只是一部分笔记===========
推荐一本书 响应式Web设计:HTML5和CSS3实战.pdf
html页面怎样能够自适应电脑屏幕宽度?
< script language=JavaScript> < !-- function redirectPage(){ var url800x600=〃index-ie.html〃; //定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下 var url1024x768=〃1024-ie.html〃;
if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率 window.location.href= url800x600;
else if ((screen.width==1024) && (screen.height==768)) window.location.href=url1024x768; else window.location.href=url800x600; } // --> < /script> 然后再在< body…>内加入onLoad=〃redirectPage()〃 最后,同样地,在< body>和< /body>之间加入以下代码来显示网页的工作信息: 企鹅号:前面九七三 中间四五四 后面两个零 < script language=JavaScript> < !-- var w=screen.width var h=screen.height document.write(〃系统已检测到您的分辨率为:〃); document.write(〃< font size=3 color=red>〃);
document.write(w+〃×〃+h); document.write(〃< /font>〃); document.write(〃正在进入页面转换,请稍候…〃); // --> < /script>
移动端web 怎么调整table使用各种手机屏幕的大小
设置width 100%就可以了,另外在html顶端,需要设置<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
微信公众平台里的界面,怎么让它自适应手机屏幕尺寸?
你弄错了~
用于手机浏览的网站,要用符合HTML5规范的代码来写,传统制作网站的HTML是不支持的,你不管怎么调节宽度,都会显示的很小。
那标签是不是也需要使用HTML5的标签呢?
对的,刚一上手挺折磨人的。
转载请注明出处51数据库 » html软件手机屏幕大小 html怎么手机自适应屏幕大小