响应式Web设计:HTML5和CSS3实战(读书笔记)

2023年6月20日发(作者：)

响应式Web设计：HTML5和CSS3实战（读书笔记）视⼝：浏览器窗⼝内的内容区域，不包含⼯具栏，标签栏。⽹页实际显⽰.

屏幕尺⼨：设备物理显⽰区域各种宽度和⾼度 a、可视区的真实宽度和⾼度 Width

Height 都去掉滚动条的⼤⼩（⼀般是17像素），⽐如我的dell笔记本在chrome下， 正常的可视区（即⽆滚动条）⼤⼩是1366*663，假如⽔平和垂直⽅向都有滚动条的话，这两个值 的⼤⼩为 1349 * 646 b、 Width ⽆滚动条 1366 有滚动条 1349 同a Height 根据实际的html元素被撑开的⼤⼩ c、 idth / eight

（1）有滚动条 Width + 滚动条宽度 （2）⽆滚动条 等于Width ⾼度计算规则同宽度响应式⽅法论先针对⼩视⼝设计然后逐步对⼤视⼝渐进增强响应式设计中内容始终优先流动布局、弹性图⽚和媒体查询：使⽤百分⽐布局创建流动的弹性界⾯，同时使⽤媒体查询来限制元素的变动范围。（平滑过渡）HTML5的时代简化标签语义化标签CSS3(圆⾓，渐变…..)-webkit-,-moz-是各⼚商发布正式版本之前，实验各⾃对css3新特性的实现业务需求和预算的考虑客户是否想⽀持互联⽹⽤户增长最迅猛的市场？如果想，那响应式⽅法就很适合。客户是否想要最简洁、快速，且易于维护的代码？如果想，那响应式⽅法就很适合。客户能否理解⽤户体验可以且本应该根据浏览器不同⽽不同？如果可以理解，那响应式⽅法就很适合。客户是否要求设计效果在所有浏览器中都保持⼀致，包括IE 8 以及更低版本？如果是，响应式设计就不适合。该⽹站的当前或预期客户中，是否有百分之七⼗以上的⼈可能使⽤Internet Explorer 8或者更低版本？如果是，则响应式设计不适合。在预算允许的情况下，⼀个完全定制的“移动”版⽹站⽐响应式设计更适合。⽹站不必在所有浏览器中表现⼀致客户->思维定式->说服引导（理由如下）允许页⾯显⽰效果在⽼旧浏览器中有细微的差别，这样可以使代码更易维护，将来更新的成本也更低。让页⾯元素在那些⽼旧浏览器（如Internet Explorer 8 及更低版本）中表现⼀致会导致⽹站增加⼤量的图⽚。这会使⽹站变慢，制作成本变⾼，⽽且更难维护。现代浏览器可以理解的简洁代码等同于更快速的⽹站。快速响应的⽹站在搜索引擎中的评级⾼于慢腾腾的⽹站。使⽤⽼旧浏览器的⽤户越来越少，使⽤现代浏览器的⽤户越来越多——我们应该⽀持⼤多数！媒体查询W3C规范审核：⼯作草案（Working Draft）->候选推荐标准（Candidate Recommendation）->提议推荐标准(Proposed

Recommendation)->⼏年时间等待->W3C 推荐标准（REC)

- CSS3 是由很多附加模块组合⽽成的。媒体查询就是其中的⼀个模块。

- 媒体查询可以让我们根据设备显⽰器的特性为其设定CSS 样式。媒体查询语法CSS 样式表中使⽤媒体查询在屏幕宽度⼩于等于400 像素的设备上，h1 元素的⽂字颜⾊就会变成绿⾊。@media screen and (max-device-width: 400px) {h1 { color: green }}给视⼝最⼤宽度为360 像素的显⽰屏设备加载⼀个名为 的样式表。@import url("") screen and (max-width:360px);使⽤CSS 的@import ⽅式会增加HTTP 请求（这会影响加载速度）通过标签的media 属性为样式表指定设备类型（如显⽰屏或打印机）。⾮纵向放置的显⽰屏设备媒体查询列表：查询列表中的任意⼀个查询为真，则加载⽂件。全部查询都不为真，则不加载。媒体主要特性width：视⼝宽度。height：视⼝⾼度。device-width：渲染表⾯的宽度（对我们来说，就是设备屏幕的宽度）。device-height：渲染表⾯的⾼度（对我们来说，就是设备屏幕的⾼度）。orientation：检查设备处于横向还是纵向。aspect-ratio：基于视⼝宽度和⾼度的宽⾼⽐。⼀个16∶9 ⽐例的显⽰屏可以这样定义aspect-ratio: 16/9。device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平⾯宽度和⾼度的宽⾼⽐。color：每种颜⾊的位数。例如min-color: 16 会检测设备是否拥有16 位颜⾊。color-index：设备的颜⾊索引表中的颜⾊数。值必须是⾮负整数。monochrome：检测单⾊帧缓冲区中每像素所使⽤的位数。值必须是⾮负整数，如monochrome: 2。resolution：⽤来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘⽶像素点数的度量值，如min-resolution: 118dpcm。scan：电视机的扫描⽅式，值可设为progressive（逐⾏扫描）或interlace（隔⾏扫描）。如720p HD 电视（720p 的p 即表明是逐⾏扫描）匹配scan: progressive，⽽1080i HD 电视（1080i 中的i 表明是隔⾏扫描）匹配scan: interlace。grid：⽤来检测输出设备是⽹格设备还是位图设备。除scan 和grid 之外，都可使⽤min 和max 前缀来创建⼀个查询范围。建议：让不⽀持css3 Media Query的浏览器包括IE6-IE8等其他浏览器⽀持查询。CSS重置样式：保证图⽚尽可能精简（base64）时刻谨记，我们要保证代码和数据都尽可能精简，以便为带宽有限的⽤户提供愉悦的体验。阻⽌移动浏览器⾃动调整页⾯⼤⼩iOS 和Android 浏览器都基于核⼼最常⽤写法width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale:页⾯⾸次被显⽰是可视区域的缩放级别，取值1.0则页⾯按实际尺⼨显⽰，⽆任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，maximum-scale⽤户可将页⾯放⼤的程序，1.0将禁⽌⽤户放⼤到实际尺⼨之上。 user-scalable:是否可对页⾯进⾏缩放，no 禁⽌缩放(很少⽤到)针对不同视⼝宽度修正设计平板设备（如iPad）增加媒体查询，竖直iPad 的视⼝

宽度是768 像素@media screen and (max-width: 768px) {#wrapper {width: 768px;}#header,#footer,#navigation {width: 748px;}}⾃适应布局缺点页⾯捕捉到媒体查询设置的断点，然后布局发⽣变化。但在

捕捉到下⼀个视⼝断点之前，页⾯静⽌不变

它不能适应未来的变化。响应式布局：固定布局->流动布局伊桑·马科特提供⼀个简易可⾏的公式，将固定像素宽度转换对应的百分⽐宽度：

（⽬标元素宽度-边框宽度）÷上下⽂（⽗级）元素宽度=百分⽐宽度

注意上下⽂的对应关系，页⾯换⾏显⽰（ul>li>a问题有可能是li的inline-block没有宽的原因，我们可以使⽤margin来控，因为宽度不是很灵活）#header {margin-right: 10px;margin-left: 10px;width: 940px;}转换#wrapper {margin-right: auto;margin-left: auto;width: 96%; /* 控制最外层的div */}#header {margin-right: 10px;margin-left: 10px;width: 97.9166667%; /* 940 ÷ 960 */}关于数字四舍五⼊，黄⾦分割率约为1:1.618怎么看它都不是⼀个简洁的数字，但是它⾮常重要。黄

⾦分割率的测量都能做到如此精确，那我相信⽹页设计同样做得到。⽤em(继承⽗级),rem（直接继承祖宗）替换pxem指的是特定字母的宽度和⾼度相对于特定字体磅值的⽐例。

- 现代浏览器的默认⽂字⼤⼩都是16 像素

- 优点：

- 使⽤Internet Explorer 6 的⽤户也将能够缩放⽂字

- 以使我们设计师和开发者的⽣活更简单给body设置font-size: 100%;font-size: 16px;font-size: 1em;缺点：每次使⽤font-size时，都要需求字体⼤⼩px/16 = 字体⼤⼩ em不过我推荐使⽤font-size:62.5%

#content h1 {font-family: Arial, Helvetica, Verdana, sans-serif;text-transform: uppercase;font-size: 4.3125em; } /* 69 ÷ 16 */#content h1 span {display: block;line-height: 1.052631579em; /* 40 ÷ 38 */color: #757474;font-size: .550724638em; /* 38 ÷ 69 */}⾏⾼的转换相对于其本⾝的⽂字⼤⼩⽽⾔弹性图⽚在现代浏览器（包括IE 7+）中要实现图⽚随着流动布局相应缩放⾮常简单。为特定图⽚指定特定规则img,object,video,embed {⽅法⼀（利⽤重写和覆盖）：max-width: 100%;max-width: 45%;⽅法⼆：width:百分⽐显⽰max-width: 202px;给弹性图⽚设置阈值}注意删除宽度和⾼度属性缺点：

要提前准备⼀张⾜够⼤的图⽚，以备⼤视⼝使⽤带宽限制限制页⾯⽆限制扩张给最外层的div设置max-width 属性#wrapper {margin-right: auto;margin-left: auto;width: 96%; /* Holding outermost DIV */max-width: 1414px;}为不同的屏幕尺⼨提供不同⼤⼩的图⽚AdaptiveImages:图⽚⾃适应源码⼯具是⼀个基于PHP语⾔编写的图⽚⾃适应解决⽅案，它⾸先利⽤⼀个轻量级的JS⽂件来探测浏览器的屏幕⼤⼩，然后将这个参数发送到服务器端的PHP脚本来对图⽚进⾏尺⼨调整。

实现 Adaptive Images 解决⽅案需要Apache 2、PHP 5.x 和GD 库，也就是说需要Web 服务器端编程。⾸先，在其⽹站上下载.zip ⽂件开始配置：

js被禁⽤的情况下依然有效

1. 解压⽂件，然后将其中的 和.htaccess ⽂件拷贝到⽹站的根⽬录。如果你⽹站的根⽬录下已经有⼀个.htaccess⽂件了，不要覆盖它。参考下载包中的 ⽂件看看怎么做合适。1. 接着在⽹站根⽬录下创建⼀个名为ai-cache 的⽂件夹。2. 然后把如下JavaScript 代码复制到每个需要⾃适应图⽚的⽹页的头部：

h5版本切记这段JavaScript 代码要放在页⾯头部（最好作为第⼀个脚本），因为它需要在页⾯加载完成之前，⽽且要在发出图⽚请求之前运⾏。Options +FollowSymlinksRewriteEngine On# Adaptive-Images ------------------------------------------------------RewriteCond %{REQUEST_URI} andthewinnerisnt让⽹站根⽬录下名为andthewinnerisnt 的⽂件夹中的图⽚被缩放# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to so we can select appropriately sized versionsRewriteRule .(?:jpe?g|gif|png)$ # END Adaptive-Images --------------------------------------------------流动⽹格布局和媒体查询的默契配合媒体查询约束流动布局的变动范围，⽽流动布局则简化了从⼀组媒体查询样式过渡到另⼀组的改变过程。HTML5（⼤家可以看我的另⼀篇⽂章）腻⼦脚本（polyfill）这个词由Remy Sharp 提出，意指使⽤腻⼦来补平⽼版

本浏览器的缺陷。因此，腻⼦脚本具体指的是⼀段能给⽼版本浏览器带来

新特性的JavaScript 代码。HTML5 样板⽂件。样板⽂件是⼀个预先做好的融

合了“最佳实践”HTML5 ⽂件，包含⼀些基本样式（如之前提到过的

）、polyfill 和⼀些必要的⼯具如Modernizr。它还包含⼀个

⾃动合并CSS 和JS ⽂件、⾃动删除注释以⽣成⽣产环境代码的构建⼯

具。强烈推荐！HTML5 精简主义各种脑残写法都可以被浏览器识别

**没有结束标签的斜线，没有引号，⼤⼩写混杂。甚⾄，省略元素，

页⾯依然有效**