《响应式web设计基础》笔记

1，CSS预处理器（Sass、LESS、Stylus、PostCSS）可以帮我们组 织代码、变量、颜色操作和数学运算。像PostCSS这样的工具可以帮我们完成添加浏览器前缀这 样烦琐的任务。另外，一些清理和验证工具可以帮我们检查HTML、CSS和JavaScript代码是否符 合标准，自动提示输入错误和语法错误。 
新

2，下载本书示例代码的地址是：http://rwd.education/download.zip或https://git- hub.com/benfrain/rwd

3，利用max-width:100%;可以使得图片始终是自己原来大小的一倍，无论viewport如何变化（除非viewport比图片自身还小，图片会变得和窗口一样大）。而width:100%;使得图片始终占满屏幕。

4，首先是“基本的”样式，它适用于任何设备。在这个样式基 础上，我们再为不同视口、不同能力的设备，渐进增加不同的视觉效果和功能

5，将容器设为display:table，则他成为一个块级表格元素，子元素display:table-cell，则子元素成为表格单元格，然后就像在表格里一样，给子元素加个vertical-align: middle就可以使得多行文字垂直居中

6，媒体查询：orientation:portriat屏幕是垂直的吗

可以组合多个媒体查询。只要其中任何一个媒体查询表达式为真，就会应用样式

 media="screen and (orientation: portrait) and (min-width: 800px), projection

7，可以在使用@import导入CSS时使用媒体查询，有条件地向当前样式表中加载其他样式表。 比如，以下代码会导入样式表phone.css，但条件是必须是屏幕设备，而且视口不超过360像素： 
@import url("phone.css") screen and (max-width:360px); 记住，使用CSS中的@import会增加HTTP请求（进而影响加载速度），因此请慎用。 另外，使用link引入外部样式表支持使用js控制DOM改变样式，@import不行。

8，把媒体查询写在需要它的地方，而不是因为媒体查询的条件相同就把他们组合到一起，这样便于代码维护。而且，在标准样式之后紧接着写媒体查询，根本用不着担 心文件大小，因为事实上gzip 压缩（应该用它来压缩服务器上的所有可以压缩的资源）完全可以把差别降到可以忽略不计的程 度。

9，content="initial-scale=2.0"的意思是“把内容放大为实际大小的两倍”（0.5 就是一半，3.0就是三倍）。后，width=device-width告诉浏览器页面的宽度等于设备的宽度 （width=device-width）。maximum-scale=3, minimum-scale=0.5"允许用户大将页 面放大到设备宽度的三倍，小可以将页面缩小至设备宽度的一半。user-scalable=no完全禁止用户缩放

10，inline-block行内元素总是会产生不易消除的间隔：

*使得父级元素font-size:0;   子级元素font-size:16px;

*使得子级元素margin-right:-5px;

11，如何得到这样的导航栏：

html:

home

about us

products

policy

contact us

css:

div{
background-color:black;
color:white;
}
.nav{
display:flex;
}
.list{
margin-right:15px;
}
.last{
margin-left:auto;//   auto使得最后一项左边有多大空位置，margin-left就有多少距离
}