响应式Web设计HTML5和CSS3实战（第2版）

Standing on Shoulders of Giants.

Chapter1

• 基于HTML5和CSS3的响应式Web设计，并不需要依赖服务端或后端方案
• 响应式Web设计的初始[Responsive Web Design · An A List Apart Article](https://alistapart.com/article/responsive-web-design)
• 先为小屏幕设计内容、样式，然后向大屏幕扩展
• 渐进增强
• 查询哪些平台和浏览器版本支持什么特性Can I use... Support tables for HTML5, CSS3, etc
• CSS预处理器（Sass, LESS, Stylus, PostCSS）
• 浏览器中用于呈现网页的区域叫视口（viewport）
• meta标签：告诉浏览器如何渲染网页
  <meta name= 'viewport' content= 'width= device- width'>
按照设备的宽度device-width来渲染网页内容
• max-width: 100%; 保证所有图片最大显示为其自身的100%
  width: 100%; 图片按照该值显示，不考虑自身固有宽度，会导致它显示得和它的容器一样宽，甚至被无谓的拉伸
• 媒体查询可以选择在某些条件下为网页应用不同的样式

@media screen and (min-width: 50em) {
    /* 样式 */
}
@media告诉浏览器这是一个媒体查询
screen告诉浏览器这规则只适用于屏幕类型
and (min-width: 50em)只适用于视口宽度在50恶魔以上的情况

• 不同的长度单位：百分比，em，rem，px
• 基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值
• SVG( Scalable Vector Graphics) 可伸缩矢量图
• CSS媒体查询的3级、4级标准

Chapter2

• W3C的制定规范流程：
  WD(Working Draft, 工作草案) ->
  CR(Candidate Recommendation, 候选标准) ->
  PR(Proposed Recommendation, 建议推荐) ->
  W3C REC( Recommendation, 推荐标准)
• CSS并不支持真正的条件逻辑或可编程特性。循环、函数、迭代和复杂的数学计算仍然只可能在CSS预处理器中看到
• CSS的可编程方式CSS Custom Properties for Cascading Variables Module Level 1
• 媒体查询在哪可以使用
  1. 在任何CSS文件的最后输入代码，例如

@media screen and (min-width: 300px) {
    body {
        background-color: yellow;
    }    
}

然后在head部分引用该css文件即可，<link rel='stylesheet' href='css/index.css'>
PS：JavaScript的外部引入，在body部分最后加入即可。<script src='js/index.js'></script>
可以利用CSS的重叠性实现对样式进行叠加修改

2. 在link标签中使用

<link rel='stylesheet' type='text/css' media='screen' href='screenstyles.css'>
或
<link rel='stylesheet' media='screen and (orientation: portrait)' herf='portrait-screen.css'>
询问是否是在有屏幕的设备上，而且设备是垂直朝向的
或
<link rel='stylesheet' media='screen and (orientation: portrait) and (min-width: 800px)' herf='800wide-portrait-screen.css'>
多个媒体查询串在一起

3. @import导入CSS时引入媒体查询
   导入CSS时使用媒体查询，有条件的向当前样式表中加载其他样式表
   @import url('phone.css') screen and (max-width: 400px);
   代码会导入样式表phone.css，但条件为必须屏幕设备，而且视口不超过400像素
   但使用CSS中的@import会增加HTTP请求

• 关于像素单位px的更多Just use pixels – Ben Frain
• 假设想在800像素处设置断点，但是又想用em单位，可以用800除以16，即为50em
• 除非真的针对特定媒体类型应用样式，否则，不用写screen and
• 性能优化的几个方面
  1. 所有图片是否都压缩了
  2. 所有脚本都拼接和缩短了
  3. 所有资源都采用Gzip压缩
  4. 所有静态内容都缓存到了CDN
  5. 所有多余的CSS规则都被清除了
• gzip是一种压缩和解压缩的文件格式。主流服务器都支持gzip压缩CSS，从而让服务器发送给设备的文件瘦身。gzip - Wikipedia