响应式Web设计：HTML5和CSS3实战

术语

• orientation: portrait 表示设备垂直朝向。
• screen 表示屏幕
• porjection 表示投影仪

笔记

• 使用<meta name="viewport" content="width=device-width" />可以使网页按照设备的宽度来渲染网页内容。
• css使用@media进行媒体查询，如@media screen and (min-width: 800px)。
• 可以在link标签的media属性进行媒体查询，如<link rel="stylesheet" media="screen and (min-width: 800px)" href="" />。
• 媒体查询中使用not表示非。
• 媒体查询可以组合使用，使用 , 将规则分开，表示只要其中有一条规则成立即应用规则。
• 使用@import和媒体查询可以在css中有条件地导入其他样式表，如@import url('/abc.css') screen and (min-width: 800px);。
• 建议把相关的css的规则写在一堆，把媒体查询写在正常情况的css规则下面，利于修改。
• 可以通过<meta />标签控制初始缩放，最小、大的缩放比例和禁止使用缩放，如<meta name="viewport" content="initial-scale=1.0, usee-scalable=no maximum-scale=3, minimum-scale=0.5" />。
• 使用flexBox技术实现可伸缩的网页效果。
• 在标签的使用上尽量进行语义化，使用语义化的标签。
• html5的表单的新功能很好，但是对于现在的浏览器来说，兼容性比较差，不大实用。
• 使用appearance: none;css属性可以去除浏览器的表单的默认样式。
• SVG是个好东西，可以用于展示，伸缩不失真，可以有动画，可以用于滤镜。可以有多种调用的方式，如：<img src="../simple.svg" />。