前端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;
}
}
普遍使用的前端开发流程是什么|软件开发中前端开发指什么|it前端开发是什么意思
» 本文来自:前端开发者 » 《前端CSS3媒体查询》
» 本文链接地址:https://www.rokub.com/4886.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!