响应式布局的实现

body{background:红色的;响应式布局的概念响应式布局，即响应式设计，是在不同屏幕分辨率的终端上浏览网页的一种不同的显示方式。响应式设计可以让网站在手机和平??板电脑上有更好的浏览和阅读体验。但需要注意的是，响应式布局的关键不只是布局，还需要考虑更多的细节，比如表单的响应式设计、图片的响应式设计等。响应式布局的实现步骤在创建响应式网站，或者将非响应式布局改成响应式布局时，首先要关注的是元素的布局。可以先完成非响应式布局，即页面宽度固定，应该没有难度。完成非响应式样式后，可以通过添加媒体查询（MediaQuery）和响应式代码来实现响应式功能。1.设置meta标签完成非响应式布局后，在head添加如下代码。设置元标记以告知浏览器使视口宽度等于设备宽度，并禁用用户缩放。这里viewport的设置需要注意，viewport是可见的屏幕尺寸；设置视口时，只设置了宽度，不用关心高度，这是因为高度会被内容自动拉长。2.通过媒体查询设置样式媒体查询（mediaquery）是响应式设计的核心。它可以与浏览器通信，并告诉浏览器如何呈现页面。媒体查询，查询viewport的宽度，查询用户使用什么设备访问页面，知道设备尺寸后调用相应的响应代码。那么如何编写媒体查询呢？1、style标签中的media属性，比如当屏幕宽度不超过340，背景色为红色时执行body{background:红色的;　可以复制以下代码练习，修改模拟设备的尺寸，显示不同的背景色body{背景：红色；}body{背景：蓝色；}　　　　　2。在link标签中设置media属性通过引入外部css，也可以实现上面代码所示的效果　　　　那么在这个720-1080.css文件中，只需要写body{background:blue;其实到这里你应该能理解响应式布局的一些概念，针对不同的设备尺寸写不同的样式，使用mediaQuery判断设备的尺寸和类型，调用对应的样式3，@media外部链接的css样式中的属性以上内容是在HTML中嵌入媒体查询的语句。现在大家都很注重模块分离的思想，所以我们也需要将mediaquery的语句写在css中，实现html和css的分离。然后在头部写，然后在这个720-1080.css文件中，需要写@mediascreenand(min-width:340px)and(最大宽度：720px）{主体{背景：蓝色；}}介绍完三种媒体查询的写法，大家一定很好奇代码中的340px和720px是怎么确定的。这很简单。一般设备大小可以和百度比较。推荐这个网站http://screensiz.es/phone说说一些常用的分辨率节点，是根据关键机型的分辨率设置的，作为参考。例如，iPhone4和5的宽度为320px。这个节点非常重要。是小屏手机的一个分界点。一般这个点是在媒体查询的时候设置的。ipadmini的宽度是768，代表中等尺寸的屏幕，所以第二个节点设置为768。具体可以这样写/*iPadmediaquery写法*/@mediaonlyscreenand(min-width:768px)and(max-width:1024px){...}/*iPhone媒体查询写法*/@mediaonlyscreenand(min-width:320px)and(max-width:767px){...}如何使用mediaquery搭建网页这里说的mediaquery搭建网页不是上面说的实现步骤，本文开头会提到响应式布局的关键在于布局，实则有PC端和移动端。你写的网页是基于PC端来适配移动端，还是基于移动端来适配PC端，这是两种情况，对应两种设计方案。对于媒体查询，分为从大写到小写，或者从小写到大写。这里涉及到其他内容，就不赘述了。可以在百度的响应式布局中写出媒体查询的解析顺序。需要注意的细节在本文开头我也说过，响应式布局的关键不只是布局，还有需要考虑的细节。即兼容性问题，字体大小单位，视口宽高设置，图像处理，表单处理……1.兼容性问题IE6、IE7、IE8不支持媒体查询。解决方案：css3-mediaqueries.js。引入这个文件可以解决IE6-8无法实现响应式媒体查询的尴尬。2.字体大小单位css3引入了一个新的单位叫rem，rem是相对于根元素的，别忘了重新设置根元素字体大小html{font-size:100%;}完成后，就可以定义responsive了字体：@media(min-width:640px){body{font-size:1rem;}}@media(min-width:960px){body{font-size:1.2rem;}}@media(min-width:1200px){body{font-size:1.5rem;}}3.视口的宽度和高度是为不同的设备和宽度设置的。宽度不固定，可以使用百分比。4.手机端必须考虑图像处理带宽。如果PC上的大图放在手机上，手机用户请求图片文件时，文件体积大，流量消耗大，请求事件长。这样的用户体验一定很差。因此需要将图片处理成响应式图片，根据终端类型、大小、分辨率适配合理的图形。解决方法有两种，一种是看文中介绍的W3Cforresponsivegraphics的草稿：新定义标签，因为是草稿可以学习，这里就不细说了，百度自己谷歌bing~另一种解决方法是液化图片。对于html页面上的图片，可以通过css样式max-width控制图片的最大宽度#wrapimg{max-width:100%;height:auto;}id是wrap中的图片会根据wrap的宽度变化实现等宽展开，设置height为auto是为了保证图片原有的宽高比，这样图片就不会被扭曲。除了img标签的图片，我们还经常遇到背景图片，比如在id为logo的i标签中设置背景图片#log{display:block;宽度：100%；高度：40px；文本缩进：55rem；背景-img:url(logo.png);背景重复：不重复；background-size:100%100%;}其中，可以设置background-size的key值，cover：按比例扩展图片，填充元素；contain：按比例缩小图像以适合元素的大小。还有很多细节需要注意，继续学习，继续积累。Bootstrap框架实现响应式布局利用Bootstrap中的网格系统可以很方便的实现响应式布局，这里我们需要了解什么是网格系统