20200820戚权

知识点：

手写响应式网页：

• @media screen and (min-width:1200px) { 选择器{ 样式代码 } }
• @media screen and (min-width:992px) and (max-width:1199px){ 选择器{ 样式代码 } }
• @media screen and (min-width:768px) and (max-width:991px){ 选择器{ 样式代码 } }
• @media screen and (min-width:576px) and (max-width:767px) { 选择器{ 样式代码 } }
• @media screen and (max-width:575px) { 选择器{ 样式代码 } }

屏幕划分：

• 超大屏 xl：min-width:1200px
• 大屏 lg：min-width:992px and max-width:1199px
• 中屏 md：min-width:768px and max-width:991px
• 小屏 sm：min-width:576px and max-width:767px
• 超小屏 xs：max-width:575px

容器：

• .container定宽容器，左右内边距15px，水平居中，每种不同的分辨率下，有不同的最大宽度(max-width)
• .container-fluid变宽容器，宽度永远是父级的100%

栅格布局：

• 栅格布局：是随屏幕或者视口(viewport)尺寸的增加，系统会自动分为最多12列，通过一系列的行(row)与列(column)的组合来创建页面布局
• 父级要写.row：注意：.row必须写在.container或者.container-fluid中。当前元素使用栅格布局，当前行被分为相等的12份，主轴为x轴的弹性布局，起点在左侧，可换行，左右为15px外边距
• 子元素要写：.col-n设置了子元素的最大宽度，一个col在row中占几份col-n，左右15内边距，n为1~12