响应式web开发指南

web常用字体

px: 像素，绝对单位，用于精准还原设计稿

em: 相对单位，相对于父元素的大小，当字体设置为em时，一直向上查找，如果一直没有查找到，换算单位为1em=16px

rem: 相对单位，相对于根元素 html 标签的大小，且参照固定不变，一般设置html 为62.5% 则 1rem=10px

 了解视口的概念：

　　在移动端浏览器中存在两种视口，一种是可见视口，即设备大小，另一种是视窗视口，即网页宽度，一般网页为了显示更多的内容，浏览器会将viewport默认缩放将网页等比例减小，但是为了用户能够更清楚的看见，通常情况下，使用自定义的配置窗口属性

　　<meta name="viewport" content="user-scalable=no , width=device-width , initial-scale=1.0 , maxinum-scale=1.0 , mininum-scale=1.0" >

媒体查询

@media screen　　and (max-width：) and(min-width：){　　　　}

百分比布局：目标元素宽度=百分数宽度*父盒子宽度

弹性盒子布局：

　　1.display 用于指定弹性盒子的容器，其值可以是flex，如果目标元素是行内元素，值为inline-flex

　　2.flex-direction ： row弹性盒子元素按横轴方向顺序排列，默认值   row-reverse弹性盒子按横轴方向逆向排列

　　　　　　　　cloumn弹性盒子按纵轴方向顺序排列　　　　clown-reverse弹性盒子元素按纵轴方向逆序排列

　　3.flex-wrap：nowrap  flex容器为单行，该情况下，flex子项可能会溢出容器　　

　　　　　　　wrap　flex容器为多行，flex子项溢出的部分会被放置到新行

　　　　　　　　wrap-reverse 反转wrap排列

　　4.justify-content：该属性能够设置子元素在当前轴方向的排列

　　　　　　flex-start：弹性盒子元素将向行起始位置对其

　　　　　　flex-end：弹性盒子元素将向行结束位置对其

　　　　　　flex-content：弹性盒子元素将向行中间位置对其

　　　　　　space-between：弹性盒子平均的分布在行里，第一个元素里的边界与行的起始位置边界对其，最后一个元素的边界与行结束的位置对其

　　　　　　space-around：弹性盒子元素会平均的分布在行里，两端保留元素与子元素的间距大小的一半

　　4.align-items：用于设置子元素在垂直轴的方向的排列

　　　　　　flex-start：弹性盒子元素在垂直于轴的方向上的起始位置对其

　　　　　　flex-end：弹性盒子元素垂直于轴的方向上的结束位置对其

　　　　　　baseline：如果弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效，其他情况下，该值将与基线对其

　　　　　　stretch：如果指定侧轴大小为auto ，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但是同样会遵照“min-width / max-width”

　　5.order ：用于设置子元素的出现顺序

　　6.flex 属性是flex-grow（扩展比率）　flex-shrink（收缩比率） flex-basis（宽度，像素值）

　　7.align-self 能够覆盖align-items属性