以下是学习响应式布局的一些笔记记录。
1.如何实现网格布局
网格布局可以用于快速搭建流动布局，让响应式对尺寸的把握更加精准。比较流行的css库bootstrap就是采用了这种布局，对于一个前端学习者来说，框架什么的还不如自己写得潇洒。自己实现其实也很简单，网格布局把一个页面分为12栏，100% /12 =8.33333%即每一栏占8.3333%，我们也采用这一方式。为了更加语义化将栏的类名设置成.col-x这样的格式，x为实际尺寸需占几栏。为了便于计算，我们将box-sizing：border-box；栏与栏之间的距离可以是margin来设置。同时将栏都设置为左浮动。将显示在同一行的栏用一个div来包裹，同样命名为.row；由于里面的元素浮动，所以父级.row需要清除浮动，.row::after,.row::before{ content="";display=table;clear:both;}.这样就可以得到多行了。
最后将多行元素放在一个div容器里，这个div可以用来设置宽度。
2.媒体查询
媒体查询就是一个什么样的媒体类型和去判断需要满足某些条件（媒体特性）满足的表达式。@media （媒体类型）（表达式）{}；当满足媒体查询条件时，执行花括号中的样式；媒体类型若不写，这默认all。对于媒体类型，大多都已废弃，用的最多的screen、print。
对于表达式，既然是表达式就得有逻辑操作符，用于媒体查询的逻辑操作符有and、not、only、or（一般直接用逗号表示了），使用only、not需要指明一种媒体类型。另外not用于整个表达式的查询。例如：
@media not screen and （color），print and (color)等价于@media (not (screen and3. (color))), print and (color)。
一些比较常用的媒体特性：
宽高比（aspect-ratio）=1/1；设备宽高比（device-aspect-ratio）=16/9
方向（orientation）：portrait竖屏、landscape横屏
3.相对单位的使用
除了一些特殊的地方使用绝对单位，基本都使用相对单位。常见%、em、rem，rem集体相对于根元素字体大小，很方便不过据说兼容性不大好；%、em都是向上逐级继承。浏览器默认字体大小为16px或14px；最小允许中文为12px。操作小技巧:
这样 1rem = 16px；而1em = 10px。同样宽度也可以这样设置，em也就可以用来定义距离了。
另外，固定单位px与%的转化：官方公式：目标元素宽度÷上下文元素宽度=百分比宽度。说白了，就是目标元素占其父元素的百分之几。
以上就是学习时的笔记记录。接下来将会把移动端的几个视口、缩放方面的知识学习并记录下来。
