【新】移动端web （flex布局 rem / vw vh 布局）

1.pc端和移动端网页的不同点

①pc屏幕大，网页用版心

②手机屏幕小，网页宽度多数为100%

2.分辨率（越高越好）

物理分辨率：生产屏幕时就固定的，不可被改变

逻辑分辨率（设备宽度）：由软件驱动所决定 （制作网页时考虑）375×667

3.视口（viewport）：浏览器显示页面内容的屏幕区域 无视口标签则宽度为980像素（默认）

使用mate标签设置视口宽度，制作适配不同设备宽度的网页（自动生成）

作用：设定html的宽度，使所制作的网页宽度与其设备相适应

pc端的视口尺寸不一致，根据其电脑的分辨率决定（100%）

4.二倍图

作用：让图片分辨率更高 设计图中使用2x

5.布局

①百分比布局（流式布局）（古老布局）

宽度自适应，高度固定 width：100%； height：80px；

②Flex布局/弹性布局 （存在兼容性 尽量移动端使用）

是浏览器提倡的布局模型，布局网页更加简单、灵活，避免了浮动脱标的问题

作用：基于flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象出现 非常适合结构化布局

设置：在父元素（亲爹 叫做 弹性容器）添加 display：flex ； 子元素（弹性盒子）可以自动的挤压或拉伸

（1）flex布局 父项常见元素

  ①设置主轴方向：（先确定主轴方向，再选择对应的属性实现主轴或侧轴对齐方式）

          flex-direction:   row（默认为x轴）/ row-reverse（从右向左）/ column（y轴）/column-reverse（从下到上） 弹性盒子随着主轴而变化

  ②主轴的子元素对齐方式

        justify-content ：flex-star，flex-end   （头部或尾部开始）     

                                center（沿主轴居中对齐 贴着顶部）