多媒体查询语法

多媒体查询语法

1.设置Meta标签

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

width = device-width:宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

 minimum-scale:允许用户缩放到的最小比例(默认设1.0)   

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)   

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 

2.加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个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渲染方式默认为最高(这部分可以选择添加也可以不添加)

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

4.进入CSS3 Media写法

我们先来看下下面这段代码

@media screen and (max-width: 960px){  

  body{        background: #000;    }

}

width:浏览器可视宽度。height:浏览器可视高度。device-width:设备屏幕的宽度。device-height:设备屏幕的高度。

 

发布了23 篇原创文章 · 获赞 4 · 访问量 4万+
展开阅读全文
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览