1。查看理想的视口（viewport）：window.screen.width2。布局视口：使PC端页面视图布局在移动端不混淆Document.documentElement.clientWidth3。视觉视口：肉眼可见视觉区域视口标签：更改layoutviewport到手机对应的那个Layoutviewport?width设置具体数据时，超出的部分会生成水平滚动条width=device-width：理想视口的宽度initial-scale：改变尺寸布局视口（页面缩放），元素大小保持不变媒体查询：媒体顺序查询：最接近元素的规则为准（覆盖）注意！！！！query匹配顺序考虑媒体特性使用相对单位Unitleftfloating：元素离开正常流，显示在其父元素的内边距区域左侧浮动POSITION：RELATIVE移除定位：你可以用topleftrightbottom来控制位置，注意相对位置还是存在的！弹性：￥2。重点：父容器和子容器flex-wrap：换行符（默认是先换行再换行）justify-content：子元素在主轴上的对齐方式（flex-star对齐到的起始位置）mainaxis)space-around（间距均分）pace-between（两边不留空格，中间均分）align-items:Crossaxis（侧轴对齐）单行情况下，如果设置Justify-content&Align-items为center，则可以实现垂直居中Align-content:多行情况下的子组件:order:控制子组件排序的顺序flex-grow:占用率（不能超过指定的大小flex-shrink:剩余空间不足时，设置子组件不换行组件占用比例flex-basis:同width，剩余空间分配基准值Align-self:可以覆盖控制父元素的，自己定义对齐使用flex-direction时，justify-content:flex-end和start的方向也是相反的注意flex以columns为方向时,justify-content控制垂直对齐，align-items控制水平对齐。用来控制单个元素反方向的属性是align-self。该属性接受与align-items相同的值。flex-wrap：?nowrap：所有元素都在一行上。wrap：元素自动换行成多行。wrap-reverse：自动将元素倒序换行成多行。flex-direction和flex-wrap这两个属性经常一起使用，所以有一个缩写属性flex-flow。这个简写属性接受两个用空格分隔的属性值。例如，您可以使用flex-flow:rowwrap将行设置为自动换行，并使用align-content确定行之间的距离。此属性接受这些值：flex-start：多行在顶部居中。flex-end：多行集中在底部。center：多行居中。space-between：保持行与行之间的距离相等。space-around：在每条线周围保持相等的距离。stretch：每一行都被拉伸以填充容器。这可能会令人困惑，但align-content决定了行之间的间距，而align-items决定了元素作为一个整体在容器中的位置。当只有一行时，align-content无效。网格系统：灵活：1.绝对尺寸单位：cmmmqinpypcpx2。相对字体大小单位：em（父元素）exchrem（根节点）3.视口百分比单位：vwvhvminvmaxmore准确稳健的转换：<16px=1rem>html{font-size:16px;}移动web前端meta通用设置
