自适应网页

方法

1.在网页代码的头部,加入一行viewport元标签

<meta name="viewport" content="width=device-width,initial-scale=1" />

viewport是网页默认的宽度和高度,上面代码的意思是:网页的宽度默认等于屏幕宽度(width=device-width),原始缩放比例为1.0(initial-scale=1),即网页初始大小占屏幕面积的100%。

2.不要用绝对宽度布局,也不要使用具有绝对宽度的元素

width: 10%;width: auto;font: 1.2em;font: 80%;

如上所示,在指定宽度时用百分比,指定字体时用em或百分比,不要用px。对于大多数浏览器来说,通常用 em=px/16 来换算。

3.流动布局

.content {  float: left;  width: 70%;}.sidebar {  float: right;  width: 25%;}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动排版在前面元素的下方,不会在水平方向overflow,避免了水平滚动条的出现。

4.根据不同屏幕宽度加载不同的css文件

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:400px)" href="tinyScreen.css" /><link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />

上面代码的意思是:如果屏幕宽度小于400像素就加载tinyScreen.css,如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

5.在css文件尾部增加针对不同屏幕分辨率的规则

@media screen and (max-device-width: 480px){  #content{    float: left;    width: 70%;  }  #sidebar{    float: right;    width: 25%;  }}

上面代码的意思是如果屏幕宽度小于480px就应用其包含的规则。

6.图片自适应

img {  max-width: 100%;}/*或*/header {  background-size: 100% 100%;}

上面的代码是让图片自动适应屏幕的大小,不会超过屏幕的宽度。

参考:

如何制作自适应网页

自适应网页设计的方法