切慕溪水 2019-06-27
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> 解释:name="viewport",viewport
用户网页的可视区域
width:控制viewport的大小,可以指定一个值,如600,或者特殊的值,如device-width为设备的宽度(单位为缩放为100%时的css的像素)
initial-scale=1.0:初始的缩放比例(默认设置为1.0)
maximum-scale=1.0:允许用户缩放的最大比例(默认设置为1.0)
minimum-scale=1.0:允许用户缩放的最小比例(默认设置为1.0)
user-scalable=no用户是否可以手动缩放
2. 加载兼容文件js
因为IE8以及以下版本都不支持hmtl5和css3。需要加载两个js文件,来保证代码兼容
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
3. 设置IE渲染方式默认为最高
让IE的文档模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> chrome=1.如果用户电脑转了chrome插件,可以让电脑里面的IE不管是哪个版本都可以使用webkit引擎V8。
4. css3 media写法
@media screen and (max-width:360px) {
body{ background: green } } @media screen and (min-width: 375px) and (max-width: 420px){ body{ background: red } }