《响应式Web设计：Html5和css3实战》第一章 记录

 

面对不断扩展的浏览器和设备，我们还是有应对方案的。这个方案就是基于HTML5和CSS3

的响应式Web设计。响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站

的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

 

“响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart上写

了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种

已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web

设计”。

 

所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

 

最初，响应式设计是从“桌面”、固定宽度设计开始的。然后，到了小屏幕上，内容会重排，

或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，

即先为小屏幕设计内容、样式，然后再向大屏幕扩展。

 

<meta name="viewport" content="width=device-width">

这个视口的标签是一种非标准的（但却是事实标准的）方式，它告诉浏览器怎么渲 染网页。在这里，

标签想表达的意思是：按照设备的宽度（device-width）来渲染网 页内容。

img { 
 max-width: 100%; 
}

这里声明max-width规则，就是要保证所有图片最大显示为其自身的100%（即最大只可以

显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的body或div）比图片固有宽

度小，图片会缩放占满最大可用空间。

说明下：width: 100%是将所有指定元素的宽度拉伸或收缩到和父元素的宽度一致，
              而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度，
              则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度

要实现图片的自动缩放，也可以使用更通用的 width 属性，比如

width:100%。然而，这条规则在这里的效果不同。如果给width属性设置一个

值，那么图片就会按照该值显示，不考虑自身固有宽度。以我们例子中的LOGO

（同样也是一张图片）为例，这条规则会导致它显示得跟它的容器一样宽。在容

器比图片宽得多的情况下（就像我们这里的LOGO一样），图片会被无谓地拉伸。

@media screen and (min-width: 50em) { 
 /* 样式 */ 
}

@media指令告诉浏览器这里是一个媒体查询，screen（技术上讲，不需要在这里声明“屏

幕”，具体细节请参考下一章）告诉浏览器这里的规则只适用于屏幕类型，而and (min-width:

50em)的意思是其中的规则只适用于视口宽度在50em以上的情况。

现在，只要知道应该以最小屏幕为起点，然后再根据需求渐进扩充视觉和功能即可。

                                                                             你的赞赏是我前进的动力！

                                                                                有错误可以下方留言