响应式Web设计:HTML5和CSS3实战(第2版)
第十章 实现响应式Web设计
10.1 尽快让设计在浏览器和真实设备上运行起来
让设计决定断点
总是从最小的屏幕尺寸开始设计，渐渐地使视口尺寸增大
这样你就能知道在哪个地方加入断点。
首先为最小的视口编写CSS，然后在媒体查询中修改其在较大视口下的表现。
.rule {
/* 小型视口样式*/
}
@media(min - width: 40e m) {
.rule {
/* 中型视口样式*/
}
}
@media(min - width: 70e m) {
.rule {
/* 大型视口样式*/
}
}
10.2 在真实设备上观察和使用设计
早测试，常测试！
使用像BrowserSync这样的工具来同步你的工作 （ https://browsersync.io/ ）
配置完成后，当你保存你的工作时，诸如CSS等的变化就会被注入到浏览器上，而无需你不断地刷新屏幕。
它还能通过WIFI将在不同设备上的浏览器刷新。
这节省了拿起每个测试设备点击刷新的时间。
它甚至能同步滚动和点击
10.3 拥抱渐进增强
应该编写能够精确描述你的内容的HTML5标记
基于文本和内容的网站
正确使用main、header、footer、article、section和aside等元素
构建Web应用或者图形化UI组件
需要思考一下如何提炼成有效的标记
在HTML上的优化越多
你在CSS和JavaScript上为老式浏览器所做的优化就越少
10.4 确定需要支持的浏览器
有的时候根据项目需要，你要从更为高级的浏览器开始编写
10.4.1 等价的功能，而不是等价的外观
网站在每个浏览器上的外观和工作方式一样是不现实也是不可取的
“支持老式浏览器”并不意味着“在老式浏览器上看起来一模一样”。
10.4.2 选择要支持的浏览器
如果这是个新项目，并且没有统计数据
我通常会遵循“前两个版本”策略
即是指当前的浏览器版本和之前的两个浏览器版本。
如果IE12是目前的浏览器版本，那么你就要兼容IE10和IE11（前两个版本）。
10.5 分层的用户体验
基本体验是站点的最小可行版本
增强体验则是包括所有功能并且最为美观的版本
然后通过Modernizr，我们可以根据浏览器的兼容性优化体验。
实现体验分层
Modernizr为基于浏览器兼容性的优化提供了最为稳健的方式
当编写CSS的时候，“基础”版本代码由以下内容组成
没有被媒体查询包裹的代码
没有被Modernizr添加选择器的代码
10.6将CSS断点与JavaScript联系起来
JavaScript总是返回宽度的像素值而不是REM值
@media(min-width: 20rem) {
body::after {
content: "Splus";
font-size: 0;
}
}
@media(min-width: 47.5rem) {
body::after {
content: "Mplus";
font-size: 0;
}
}
@media(min-width: 62.5rem) {
body::after {
content: "Lplus";
font-size: 0;
}
}
在每一个我们想和JavaScript沟通的断点处，我们使用了after伪元素
你也可以使用before伪元素
将其内容设置为断点的名称
在JavaScript中，我们可以阅读这个值
var size = window.getComputedStyle(document.body,':after').
getPropertyValue('content');
下面是一个简单的自我调用函数（自我调用意味着它在浏览器解析它的时候马上被调用）
;(function alertSize() {
if (size.indexOf("Splus") != -1) {
alert('I will run functions for small screens');
}
if (size.indexOf("Mplus") != -1) {
alert('At medium sizes, a different function could run');
}
if (size.indexOf("Lplus") != -1) {
alert('Large screen here, different functions if needed');
}
})();
10.7 避免在生产中使用CSS框架
10.8 尽可能使用最简单的代码
需要为列表中的第五个元素添加不同的样式
并且你能操作标记，那就不要像下面这样使用nth-child选择器：
.list-item:nth-child(5) {
/* 样式*/
}
<li class="list-item specific-class">Item</li>
然后使用类来添加样式：
不仅更易懂，而且支持度也更高（旧版本的IE浏览器并不支持nth-child选择器）
.specific-class {
/* 样式*/
}
10.9 根据视口隐藏、展示和加载内容
响应式Web设计中有一个常用的准则：
如果你在小屏幕上不加载某一部分，那么在大屏幕上也不应该加载。
意味着在每一个视口下用户都应该能达到同样的目的（购买产品、阅读文章、完成交互）
随着屏幕的尺寸越来越大，我们也没有必要去增加额外的部分（窗口小部件、广告、链接等）来填充空白。
将复杂的可视化工作交给CSS
JavaScript可以实现单独使用CSS无法实现的交互效果
如果可能的话，在涉及视觉效果的时候，我们仍然应该将工作交给CSS来完成,这意味着:
不要单独使用JavaScript实现菜单移入、移出、打开、关闭的动画效果
相反，应该使用JavaScript在相关的部分上做简单的类变换，然后让类去触发CSS展示相关的动画效果。
10.10 验证器和代码检测工具
10.11 性能
基础条例：
(1) 减少你的资源数（例如，不要加载15个JavaScript文件，而应该将它们拼成一个）。
(2) 减小你的页面大小（如果你能压缩图片，那么请压缩）。
(3) 延迟加载非必需资源（如果你可以将CSS和JavaScript的加载延迟到页面加载完成后，就可以大幅缩短初始化时间）。
(4) 保证页面尽快可用（通常是上述所有步骤的副产物）。
有很多工具可以度量和优化性能
最后编辑于 ：2017.12.11 10:24:37
©著作权归作者所有,转载或内容合作请联系作者
