HTML总结06(自适应布局方案)1. 常见的布局单位 px:本质上是相对单位，但是由于 pc端都是普通屏幕，而移动端

1. 常见的布局单位

px:本质上是相对单位，但是由于 pc端都是普通屏幕，而移动端都是相对于设备独立像素开发，所以，可以看成是绝对单位。
em:相对单位, 1em等于当前元素的font-size值
- 如果本级元素没有设置字号，则会遵守css继承规则
- 在父级都没有设置字体的情况下，会继承浏览器默认的设置
- 目前大部分浏览器的默认字体大小是 16px，所以取默认值，可以根据浏览器进行设置
- 如果做响应式的话，em无疑是比较适合的，但是我们需要频繁去设置字体
rem 相对单位
- r -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸 1rem 就是html的font-size值
- rem 与本级元素字号无关
- rem只根据根节点 html的字号来进行参考，在没有设置的情况下，取浏览器的默认值 16
- 但是这是不可控的，所以为了统一标准，还是要事先进行设置
- rem的出现其实就是弥补 em的不足，用来更好的进行响应式布局
vw/vh:
- 把屏幕分为100份, 1vw就等于屏幕宽度的1%,1vh就等于屏幕高度的1%,
- vw和vh 是相对于设备的尺寸来进行布局的。
注意：谷歌浏览器最小的字体单位是12px,即使设置的小于12px,也会默认为12px. 2. 百分比布局
特性：关键元素高宽和位置都不变，只有容器元素在做伸缩变换
是一种典型的流式布局
布局方式：布局盒子采用百分比，容器盒子与文字采用固定大小
max-width 最大宽度(max-height最大高度)
min-width最小宽度（min-height最小高度）
优点：大屏下可以展示更多内容
缺点：宽屏下比例会比较不协调
注意: 这种情况css尺寸单位用px就好，不要用rem，避免增加复杂度。
例子：【拉勾网】, 【美团】

3. flex布局

弹性布局，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"
容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性：
- flex-direction属性：决定主轴的方向（即项目的排列方向）
  
  ① row（默认值）：主轴为水平方向，起点在左端。
  
  ② row-reverse：主轴为水平方向，起点在右端。
  
  ③ column：主轴为垂直方向，起点在上沿。
  
  ④ column-reverse：主轴为垂直方向，起点在下沿。
- flex-wrap属性：默认情况下，项目都排在一条线（又称"轴线"）上,该属性决定不在轴线时如何换行。
  
  ① nowrap（默认）：不换行。
  
  ② wrap：换行，第一行在上方。
  
  ③ wrap-reverse：换行，第一行在下方。
- flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content属性：定义了项目在主轴上的对齐方式。
  
  ① flex-start（默认值）：左对齐
  
  ② flex-end：右对齐
  
  ③ center：居中
  
  ④ space-between：两端对齐，项目之间的间隔都相等
  
  ⑥ space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-items属性定义项目在交叉轴上如何对齐。
  
  ① flex-start：交叉轴的起点对齐。
  
  ② flex-end：交叉轴的终点对齐。
  
  ③ center：交叉轴的中点对齐。
  
  ④ baseline: 项目的第一行文字的基线对齐。
  
  ⑤ stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
  
  ① flex-start：与交叉轴的起点对齐。
  
  ② flex-end：与交叉轴的终点对齐。
  
  ③ center：与交叉轴的中点对齐。
  
  ④ space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  
  ⑤ space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  
  ⑥ stretch（默认值）：轴线占满整个交叉轴。
项目的属性
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值，则项目将占据固定空间。
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

4. 媒体查询

meida queries 的方式可以说是早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点：
1. 方法简单，成本低，特别是对移动和PC维护同一套代码的时候。
2. 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点：
1. 代码量比较大，维护不方便
2. 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
3. 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式 5. rem布局
特性: 关键元素盒子大小与文字都随着屏幕大小不同,而展示不同的大小
布局的方式：
1. 根据屏幕大小不同设置html不同的字体大小
2. 所有的盒子尺寸和文字大小采用rem的布局方式
动态设置font-size
设置方式

	const html = document.documentElement;
	const width = html.getBoundingClientRect().width;
	html.style.fontSize = width / 7.5 + 'px';
    //  因为一般设计图都是 750px的，所以 整除 7.5 ，换算的时候比较方便

字体也可以不使用rem单位(通常也不建议字体用rem单位), 采用不同的媒介方式,

@media screen and (max-width:321px){
    .basesize{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
    .basesize{font-size:16px}
}

如果只是希望盒子根据屏幕大小不同而改变, 但是文字大小不改变,可以在body重新固定文字大小
```
	body{
 	 font-size:16px;
  	}
```
代表网站:【网易】、【淘宝】

6. 固定缩放布局

固定高度宽度.文字大小，通过改变缩放比例适配
根据屏幕的分辨率动态设置适配缩放比例，达到等比缩放的功能

根据dpr来设置不同的viewport缩放比例

  // 改变视口的缩放比例
  (function(){
    const width = window.screen.width;
    const fixWidth = 750; // 根据设计图来
    const ratio = width / fixWidth;
    const meta = document.querySelector('meta[name=viewport]')
    meta.setAttribute(
        'content',
        'width=' +
        fixWidth +
        ', initial-scale=' +
        ratio +
        ', maximum-scale=' +
        ratio +
        ', user-scalable=no'
    );
   })()

7. 通过vm设置html字体

1vw 代表屏幕的 1%，以iphone6为例 375px=100vw 1vw = 3.75如果我希望 html的字体大小是100px
```
html{
    font-size:26.6666667vw;
	}
```
如果切换到iphone 6plus 1vw = 4.41px
注意, 要给body重置一下font-size: 16px;
例子：【网易】