响应式Web设计：HTML5和CSS3实战（读书笔记）
视⼝：浏览器窗⼝内的内容区域，不包含⼯具栏，标签栏。⽹页实际显⽰.
屏幕尺⼨：设备物理显⽰区域
各种宽度和⾼度
a、可视区的真实宽度和⾼度
document.documentElement.clientWidth
document.documentElement.clientHeight
都去掉滚动条的⼤⼩（⼀般是17像素），⽐如我的dell笔记本在chrome下，
正常的可视区（即⽆滚动条）⼤⼩是1366*663，假如⽔平和垂直⽅向都有滚动条的话，这两个值
的⼤⼩为1349 * 646
b、
document.documentElement.offsetWidth⽆滚动条1366有滚动条1349同a
document.documentElement.offsetHeight根据实际的html元素被撑开的⼤⼩
c、
window.innerWidth / window.innerHeight
（1）有滚动条 document.documentElement.clientWidth + 滚动条宽度
（2）⽆滚动条等于document.documentElement.clientWidth
⾼度计算规则同宽度
响应式⽅法论
先针对⼩视⼝设计
然后逐步对⼤视⼝渐进增强
响应式设计中内容始终优先
流动布局、弹性图⽚和媒体查询：使⽤百分⽐布局创建流动的弹性界⾯，同时使⽤媒体查询来限制元素的变动范围。（平滑过渡）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 像素的显⽰屏设备加载⼀个名为phone.css的样式表。
@import url("phone.css") screen and (max-width:360px);
使⽤CSS 的@import ⽅式会增加HTTP 请求（这会影响加载速度）
通过标签的media 属性为样式表指定设备类型（如显⽰屏或打印机）。
⾮纵向放置的显⽰屏设备
<link rel="stylesheet"media="not screen and (orientation: portrait)"href="portraitscreen.
css" />
媒体查询列表：查询列表中的任意⼀个查询为真，则加载⽂件。
全部查询都不为真，则不加载。
<link rel="stylesheet"media="screen and (orientation: portrait) and (min-width:
800px), projection"href="800wide-portrait-screen.css" />
媒体主要特性
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 前缀来创建⼀个查询范围。
建议：
Respond.js让不⽀持css3 Media Query的浏览器包括IE6-IE8等其他浏览器⽀持查询。
CSS重置样式：normalize.css
保证图⽚尽可能精简（base64）
时刻谨记，我们要保证代码和数据都尽可能精简，以便为带宽有限的⽤户提供愉悦的体验。
阻⽌移动浏览器⾃动调整页⾯⼤⼩
iOS 和Android 浏览器都基于核⼼
最常⽤写法
<meta name="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no">
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;margin属性值可以为百分比
width: 97.9166667%; /* 940 ÷ 960 */
}
关于数字四舍五⼊，黄⾦分割率约为1:1.61803398874989怎么看它都不是⼀个简洁的数字，但是它⾮常重要。黄
⾦分割率的测量都能做到如此精确，那我相信⽹页设计同样做得到。
⽤em(继承⽗级),rem（直接继承祖宗）替换px
em指的是特定字母的宽度和⾼度相对于特定字体磅值的⽐例。
- 现代浏览器的默认⽂字⼤⼩都是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 h1span{
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;
}
为不同的屏幕尺⼨提供不同⼤⼩的图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。