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
- 媒体查询在哪可以使用
- 在任何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的重叠性实现对样式进行叠加修改
- 在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'>
多个媒体查询串在一起
- @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
- 性能优化的几个方面
- 所有图片是否都压缩了
- 所有脚本都拼接和缩短了
- 所有资源都采用Gzip压缩
- 所有静态内容都缓存到了CDN
- 所有多余的CSS规则都被清除了
- gzip是一种压缩和解压缩的文件格式。主流服务器都支持gzip压缩CSS，从而让服务器发送给设备的文件瘦身。gzip - Wikipedia
