前端CSS3媒体查询

前端开发需要搭建什么环境|什么是前端组件式开发|前端开发用什么调试

随着响应式设计模型的诞生，web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。

准备工作1：设置Meta标签

<meta name=”viewport” content=”width=device-width, initial-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”>

太给力了。

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge，chrome=1″>

进入CSS3 Media写法

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

body{

background: #000;

}

}

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){

body{

background: #000;

}

}

CSS2 Media用法

<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.css”>

<link rel=”stylesheet” type=”text/css” media=”screen and (orientation:portrait)” href=”style.css”>

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:960px)” href=”style.css”>

回归CSS3 Media

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

body{

background:red;

}

}

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

body{

background:orange;

}

}

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

body{

background:yellow;

}

}