2020.8.20-易科

手写响应式

移动端响应式，需要设置视口

在head标签中添加：

属性及属性值：width=device-width、initial-scale=1、minimum-scale=1、maximum-scale=1、user-scalable=0

媒体查询

@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) { 选择器{ 样式代码 } }

常用设备关键字：screen；print；speech；all

定位(float面试、相对定位+绝对定位、默认流)

响应式网页的构成

1. 流式布局(默认文档流+浮动)

2. 文字和图片的大小随着容器的大小而改变

3. 使用CSS3提供的媒体查询技术

栅格布局

1.web网页布局方式：table布局、div+css布局、boot中的栅格

2.栅格的使用：父级要写：.row>>>>当前元素使用栅格布局，当前行被分为相等的12份，主轴为x轴的弹性布局，起点在左侧，可换行，左右为15px外边距

子元素要写：.col-n>>>>设置了子元素的最大宽度，一个col在row中占几份col-n，左右15内边距，n为1~12

3.响应式栅格布局

.col-n、.col-sm-n、.col-md-n、.col-lg-n、.col-xl-n

4.列偏移

offset-n、响应式列偏移