制作自适应网页的注意事项

制作自适应网页的注意事项

最近接手一个网站项目，要求多端自适应，在制作时，没有充分考虑，踩了挺多坑，专门记录一下自适应网页制作的注意事项。

1. 核心：CSS3的MediaQuery。

MediaQuery可以探测屏幕宽度，识别不同设备，加载相对应的CSS文件。

注意：

max-device-width：面向移动设备，是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。网页不会随浏览器缩小而自适应变化。

max-width：面向PC设备，是目标显示区域的宽度，例如，浏览器宽度。网页随浏览器缩小而发生自适应变化。

如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。

如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。

<link rel="stylesheet" media="screen and(max-device-width: 640px)"href="firstStyle.css" />

代码的意思是，如果屏幕宽度小于 640像素（max-device-width: 640px），就加载firstStyle.css文件。

<link rel="stylesheet" media="screen and (min-width: 640px) and (max-width: 1000px)" href="secondStyle.css" />

代码的意思是，如果屏幕宽度在640~1000像素之间(min-width: 640px) and (max-width: 1000px，就加载secondStyle.css文件。

<link rel="stylesheet" media="screen and(min-width: 1000px)"href="thirdStyle.css" />

代码的意思是，如果屏幕宽度大于1000像素(min-width: 1000px)，就加载thirdStyle.css文件。

2. 设置网页宽度自动调整

 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user- scalable=0, width=device-width"/> 

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

3. 避免使用绝对宽度★

图片高宽用百分比, 只能设置一个, 另一个用Auto

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度，也不能使用具有绝对宽度的元素。应该不能直接指定像素宽度：width:xxx px。要使用指定百分比来定义列宽度：width: xx%。或width:auto。或使用最大宽度和最大高度max-width,max-height。

4. background作为大底图使用

大图片做适配时, 强烈建议把图片用作background, 同时搞清楚background-size, background-position 的用法, 对一些设置起到非常有利的帮忙 。

5. 字体的自适应

字体也不能使用绝对大小px，而只能使用相对大小vw或者em。

方法1：使用clamp()函数。

font-size：clamp(MIN, VAL, MAX)

VAL = 字体px/当前设计宽度px*100

例：

width 600px デザイン時のフォントが 18px の場合は、

18px / 600px x 100 = 3vw

font-size: clamp(16px, 3vw, 26px);

font-size: clamp(最小値, 推奨値, 最大値);

方法2：使用相对大小em

body {font: normal 100% Helvetica, Arial, sans-serif;}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {font-size: 1.5em;}然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5） 。

small {font-size: 0.875em;}small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

6. 图片的自适应

img { max-width: 100%;}

这行代码 对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。

这时，可以尝试使用IE的专有命令：

img { -ms-interpolation- mode: bicubic; }

或者，

Ethan Marcotte的imgSizer.js

addLoadEvent(function() {var imgs = document.getElementById_x_x_x ("content").getElementsByTagName("img");imgSizer.collate(imgs);});

不过，有条件的话，最好还是根据不同大小 的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。