css3响应式布局之媒体查询和rem

1. 在样式表中可以使用media来局部定义响应式布局。
2. 可以使用’and’来表示条件。
3. 可以使用’,'来表示或。
4. 可以使用’not’来表示非。
5. 可以使用’only’来排除低端的浏览器，其运行过程就是先查看当前浏览器中是否含有媒体查询这个功能，没有就直接忽略这段样式。
6. @import url(small-x.css) only screen and (max-width: 768px); @import url(small.css) only screen and (min-width: 768px); @import url(medium.css) only screen and (min-width: 960px); @import url(big.css) only screen and (min-width: 1280px);
   这里是通过在主css文件中引入其他的局部响应式文件来做的,这里需要注意的是代码的先后顺序,从上往下应该是最小宽度越小的排在越上面，否则就会导致样式的冲突和覆盖。
   7.rem就是值当前html的字体大小，html的字体大小假设是16px，那么1rem就是16px,这就类似于变量的思想，这样即使屏幕大小不一样，也可以只改动html的字体大小就能改变所有元素的大小,如果用px的话一旦需要响应式时就要每个地方都要改，难以维护。