HTML常使用的布局方法——响应式布局

什么是响应式布局？

随着css3的诞生，css3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。媒体查询的大部分媒介特性都接受min和max用于表达：大于或等于   和   小于或等于；

近几年web响应式布局越发流行，它的主要作用是根据不同大小的电脑屏幕，给出不同的内容尺寸宽度，进而提升一定的用户体验的。例如Apple的页面，随便拉伸会自动响应布局。效果还是挺不错的。

那么，问题来了，我们该如何使用响应式布局呢？它的工作原理又是什么？

响应式布局主要是通过css3的media来根据浏览器的宽度来起效对应的样式。

我们最常使用的就是max-width和min-width来当作媒体查询的判断条件了。

例如@media (max-width: 768px){...}，表示在浏览器最大宽度小于等于768px时，大括号内的样式生效。

min-width则表示是大于等于对应值时样式生效。示例样式代码如下：

@media screen and (max-width:500px) {        //当屏幕宽度小于500排序时 div为红色

          .div1 {

                background-color: red;

          }

}

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

          .div1 {                                //当屏幕宽度大于等于501小于960排序时 div为黄色

                 background-color: yellow;

           }

}

@media screen and (min-width:961px) {      //当屏幕宽度大于等于961px时 div为绿色

           .div1 {

                   background-color: green;

           }

}

另外拓展一下，媒体查询的媒体类型不止有screen（屏幕）、还有print（打印机）等；媒体查询的默认值为all，我们通常写screen；

而且语句需要使用and逻辑操作符进行连接，把多个媒体属性组合起来，合并到同一条媒体查询中。

还有就是在link中@mwdia的写法如下所示：

<link rel="stylesheet" href="./pad.css" media="screen and (min-width:961px)">

响应式布局先介绍到这里，如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。

您赞就是是我最大的动力！！！