响应式开发从原理到实战案例（五）：使用媒体查询改进响应式页面

来源：互联网发布：js获取上传文件的md5 编辑：程序博客网时间：2024/05/22 03:35

前面使用JS来实现响应式的页面，有了媒体查询可以这样改进了

在link标签上使用媒体查询，不需要编写那么JS代码：

<link media="screen and (min-width:620px)" href="../css/index-large-screen.css" type="text/css" rel="stylesheet"/><link media="screen and (max-width:621px)" href="../css/index-small-screen.css" type="text/css" rel="stylesheet"/>

在link标签上用media属性指定媒体查询的内容，条件符合的则引入样式文件。不需要写JS代码。

但也存在问题，能不能不使用两个样式文件，从性能上讲，发生两次请求没有发生一次请求好！那么怎样合并两个样式文件的内容了？

答案是在样式文件里使用@media媒体查询，媒体查询其实就是对设备的一种检测条件，将检测的逻辑放到了CSS样式，不在用js那么复杂。

/*媒体查询，宽屏*/@media screen and (min-width: 620px) {    .header-wrapper .nav-list li{        float: left;  }    .more-list button{        display: none;  }}/*媒体查询，窄屏*/@media screen and (max-width: 620px) {    /*对展开列表定位、设置背景颜色*/    .header-wrapper .nav-collapse{        position: relative;        top:40px;        background-color: #3c3f41;  }    /*列表第一个元素除外列表上边距为1.2px*/    .header-wrapper .nav-list li:not(:first-child){        margin-top: 1.2px;  }    .more-list button{        display:block;  }}

使用@media媒体查询解决了几个重要问题
1.丢弃js的逻辑代码，由媒体查询条件来控制
2.不需要编写多个样式文件，在一个样式文件就能完成

~~~~~~~~~~~~~~~~~下一节《使用框架bootstrap完成响应式》~~~~~~~~~~~~~~~~~

0 0