媒体查询
通过@media定义样式,浏览器窗口满足指定条件,才会应用此样式。
.box{
width:200px;height:200px;
background-color: red;
/小于指定宽度,样式生效/
@media screen and (max-width:600px){
.box{
background-color: blue;
}
}
响应式页面的优点与缺点
优点:一套页面适应多端设备,提升开发效率。
缺点∶页面效果不及单独为某一终端定制的页面效果﹔性能问题﹔维护成本提升;
总结:大部分项目不会整体才有响应式页面的解决方案。