响应式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) 保证页面尽快可用（通常是上述所有步骤的副产物）。
- 有很多工具可以度量和优化性能
