关于网页自适应

手机端页面必须放上这句话：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="format-detection" content="telephone=no">

width:可视区域的宽度，值可为数字或关键词device-width。

intial-scale:页面首次被显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放，no 禁止缩放。
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器；

手机页面一般不用固定的宽度都是用的百分比或者auto;

字体也不能使用绝对大小（px），而只能使用相对大小（em）。(但是本人习惯用px)

<link rel="stylesheet" type="text/css"　media="screen and (max-device-width: 400px)" href="tinyScreen.css" />如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件

<link rel="stylesheet" type="text/css"　media="screen and (min-width: 400px) and (max-device-width: 600px)"    href="smallScreen.css" />如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。@import url("tinyScreen.css") screen and (max-device-width: 400px);

但是一般是写在css里面@media screen and (max-device-width: 400px) {.contant{width:100%; }　　}

图片的自适应：img { max-width: 100%;}但是ie浏览器不支持max-width所以最好写成img{width:100%}再windows中图片容易失真可以使用img { image-rendering: optimizeQuality; /* Firefox 3.6+; default behavior is identical, no need to specify */

-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0; default in IE8+ */}但是正常情况下使用img{width：100%;}就可以满足需求

转载于:https://www.cnblogs.com/miss1332/p/9870413.html