css3媒体查询

切慕溪水 2019-06-27

  1. 设置meta标签
<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
        }
        
    }

相关推荐