HTML和CSSBFC BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块

BFC

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发BFC的条件包括不限于：

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

防止margin重叠（塌陷）

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

这时候边距不会重叠：

清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面显示如下：

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC，以此适应两栏布局

.main {
    overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下：

总结

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素

居中

1.行内元素水平居中

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

   .parent{
        text-align:center;//在父容器设置
    }

此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent{
    text-align:center;  
  }
  .child {
    display: inline-block;
  }
</style>

2.块级元素的水平居中

这种情形可以有多种实现方式，下面我们详细介绍:

①将该块级元素左右外边距margin-left和margin-right设置为auto

.child{
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

②使用table+margin

先将子元素设置为块级表格来显示（类似），再将其设置水平居中

display:table在表现上类似block元素，但是宽度为内容宽。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

③使用absolute+transform

先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  .parent {
    position:relative;
  }
</style>

不过transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀。

④使用flex+justify-content

通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
    justify-content:center;
  }
</style>

⑤使用flex+margin

通过flex将父容器设置为为Flex布局，再设置子元素居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: flex;
  }
  .child {
    margin:0 auto;
  }
</style>

3.多块级元素水平居中

①利用flex布局

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式，本例中设置子元素水平居中显示。

 #container {
    display: flex;
    justify-content: center;
}

源代码演示

②利用inline-block

将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

.container {
text-align: center;
}
.inline-block {
display: inline-block;
}

源代码演示

4.浮动元素水平居中

对于定宽的浮动元素，通过子元素设置relative + 负margin
对于不定宽的浮动元素，父子容器都用相对定位
通用方法(不管是定宽还是不定宽)：flex布局

①定宽的非浮动元素

通过子元素设置relative + 负margin,原理见下图：

注意：样式设置在浮动元素本身

.child {
   position:relative;
   left:50%;
   margin-left:-250px;
}
<div class="parent">
  <span class="child" style="float: left;width: 500px;">我是要居中的浮动元素</span>
</div>

②不定宽的浮动元素

通过父子容器都相对定位，偏移位移见下图：

注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>
.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

③通用办法flex布局(不管是定宽还是不定宽)

利用弹性布局(flex)的justify-content属性，实现水平居中。

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
    width: 200px;//有无宽度不影响居中
}
<div class="parent">
  <span class="chlid">我是要居中的浮动元素</span>
</div>

5.绝对定位元素水平居中

这种方式非常独特，通过子元素绝对定位，外加margin: 0 auto来实现。

<div class="parent">
    <div class="child">让绝对定位的元素水平居中对齐。</div>
</div>
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*绝对定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0;/*此处不能省略，且为0*/
    }

1.单行内联元素垂直居中

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2.多行内联元素垂直居中

①利用flex布局（flex）

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。这种方式在较老的浏览器存在兼容性问题。

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②利用表布局（table）

利用表布局的vertical-align: middle可以实现子元素的垂直居中

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 块级元素垂直居中

①使用absolute+负margin(已知高度宽度)

通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现了。

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②使用absolute+transform

当垂直居中的元素的高度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③使用flex+align-items

通过设置flex布局中的属性align-items，使子元素垂直居中。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④使用table-cell+vertical-align

通过将父元素转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置 vertical-align属性，使表格单元格内容垂直居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

三、水平垂直居中

这种情形也是有多种实现方式，接下去我们娓娓道来：

方法1：绝对定位与负边距实现（已知高度宽度）

这种方式需要知道被垂直居中元素的高和宽，才能计算出margin值，兼容所有浏览器。

// css部分
 #container {
      position: relative;
    }
 #center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
    }

// html部分(这部分不做变化,下面例子直接共用)
<body>
  <div id='container'>
    <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
  </div>
</body>

方法2：绝对定位与margin:auto（已知高度宽度）

这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

 #container {
      position: relative;
      height:100px;//必须有个高度
    }
 #center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;//注意此处的写法
    }

方法3：绝对定位+CSS3(未知元素的高宽)

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。 CSS3的transform固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

  #container {
      position: relative;
    }
  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

方法4：flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。不能兼容低版本的IE浏览器。

   #container {//直接在父容器设置即可
      height: 100vh;//必须有高度
      display: flex;
      justify-content: center;
      align-items: center;
    }

方法5：flex/grid与margin:auto(最简单写法)

容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

  #container {
      height: 100vh;//必须有高度
      display: grid;
    }
  #center {
      margin: auto;
    }

清除浮动

套路1：给浮动元素的父元素添加高度（扩展性不好）

如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。

套路2：clear:both;

在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

	<div id="wrap">
	    <div id="inner"></div>
	    <div style="clear: both;"></div>
	</div>

	#wrap{
	      border: 1px solid;
	}
	#inner{
	      float: left;
	      width: 200px;
	      height: 200px;
	      background: pink;
	}

套路3：伪元素清除浮动

上面那种办法固然可以清除浮动，但是我们不想在页面中添加这些没有意义的冗余元素，此时如何清除浮动吗？ 结合 :after 伪元素和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

<div id="wrap" class="clearfix">
    <div id="inner"></div>
</div>

      #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }
      /*开启haslayout*/
      .clearfix {
        *zoom: 1;
      }
      /*ie6 7 不支持伪元素*/
      .clearfix:after {
        content: '';
        display: block;
        clear: both;
        height:0;
        line-height:0;
        visibility:hidden;//允许浏览器渲染它，但是不显示出来
      }

给浮动元素的父容器添加一个clearfix的class，然后给这个class添加一个:after伪元素，实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案，推荐使用

套路4：给父元素使用overflow:hidden;

这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。

BFC的触发方式

我们可以给父元素添加以下属性来触发BFC：

float 为 left | right
overflow 为 hidden | auto | scorll
display 为 table-cell | table-caption | inline-block
position 为 absolute | fixed

这里可以给父元素设置overflow:auto，但是为了兼容IE最好使用overflow:hidden。

但这种办法有个缺陷：如果有内容出了盒子，用这种方法就会把多的部分裁切掉，所以这时候不能使用。

BFC的主要特征:

BFC容器是一个隔离的容器，和其他元素互不干扰；所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
BFC不会重叠浮动元素
BFC可以包含浮动,这可以清除浮动。

套路5：br标签清浮动

br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。

    <div id="wrap">
      <div id="inner"></div>
      <br clear="all" />
    </div>

      #wrap {
        border: 1px solid;
      }
      #inner {
        float: left;
        width: 200px;
        height: 200px;
        background: pink;
      }

HTML语义化标签

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

盒子模型

标准盒子模型：width === content

怪异盒子模型：width === content + padding + border

box-sizing:border-box(IE)||content-box;(标准)

选择器

id选择器：选择具有特定 ID 的元素。ID 必须是唯一的。使用时用#符号表示，例如#idName选择了 id 为 idName 的元素。
类名选择器：选择具有特定类名的元素。一个类可以在文档中被多次使用。使用时用.符号表示，例如.item选择了 class 为 item 的元素。
标签选择器：选择所有特定类型的元素。例如 p 标签、div 标签等。
后代选择器：选择某个元素的后代元素。中间用空格隔开，例如 body div会选择 body 中的所有 div 标签。
子选择器：选择某个元素的直接子元素。使用 >，例如 body > div 选择了 body 下直接子元素 div。

兄弟选择器：选择紧接在另一个元素之后的元素。使用+ ，例如.wrap + div只会选择离 wrap 类最近的那个 div 标签。
群组选择器：选择多个不同的选择器并应用相同的样式。用,隔开，例如.wrap , .item选择了类名为 wrap 和 item 的元素。
属性选择器：选择具有特定属性或属性值的元素。例如 div[abc] 选择div中具有 abc 属性的元素。
伪类选择器：选择元素在特定状态下的样式，例如a:hover，用于鼠标悬停在元素上时应用特定的样式。
伪元素选择器：选择元素的特定部分，如首行或首字母。例如.wrap::before可以在 wrap 类内的前面插入内容。

优先级指的是当多个样式规则应用于同一个元素时，哪个样式规则将被应用。

!important > 行内样式 > id选择器 > 类名选择器 > 标签选择器

当多个选择器具有相同优先级时，后面的样式会覆盖前面的样式。

em、rem、vw、vh、px的区别

绝对单位：px（基于屏幕分辨率的基本单位）
相对单位：
1. em：相对于当前元素的字体大小，会随着父元素变化而变化。
2. rem: 相对于根元素（html 元素）的字体大小。
3. vw：视口宽度的百分比。100vw表示整个视口宽度。
4. vh：视口高度的百分比。1vh表示视口高度的1%。

几种隐藏元素的方式

display: none;不在文档流中，不会触发事件，会回流，会重绘，元素完全从文档流中移除，不占用空间。 opacity: 0;在文档流中，会触发事件，不会回流，会重绘，使元素透明度为0，但仍然占据空间，可接收鼠标事件。 width: 0; height: 0;不文档流中，不会触发事件，会回流，会重绘，设置元素的宽高为0，使其看起来消失。 visibility: hidden;在文档流中，不会触发事件，不会回流，会重绘，元素不可见但仍保留其原来的空间。

移动端适配

像素pixel

像素是硬件和软件所能控制的最小单位，一个像素，就是一个点，或者说是一个很小的正方形

屏幕分辨率

屏幕分辨率指一个屏幕具体由多少个像素点组成，单位是px。

物理像素（设备像素）

厂家在生产显示设备时就决定的实际点的个数，对于不同设备物理像素点的大小是不一样的。（设备控制显示的最小单位，我们常说的1920*1080像素分辨素就是用的物理像素单位）

逻辑像素（设备独立像素）

在iPhone4使用的视网膜屏幕中，把4个像素当1个像素使用，这样让屏幕看起来更精致，并且在不同屏幕中，相同的逻辑像素呈现的尺寸是一致的。所以高分辨率的设备，多了一个逻辑像素

1个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰

通俗的理解就是定义了一个每种分辨率设备上一样的显示单位，pc上1css像素就等于1设备像素，移动端上1px可能会是2px的设备像素

设备像素比dpr

dpr（device pixel ratio） 表示设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取

计算公式为：DPR = 物理像素/逻辑像素

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。

CSS像素 = 设备独立像素 = 逻辑像素

布局视口（layout viewport）

它是由浏览器提出的一种虚拟的布局视口，用来解决页面在手机上显示的问题。这种视口可以通过<meta>标签设置viewport来改变。移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

我们可以通过document.documentElement.clientWidth来获取布局视口大小

视觉视口（visual viewport）

它指的是浏览器的可视区域，也就是我们在移动端设备上能够看到的区域。默认与当前浏览器窗口大小相等，当用户对浏览器进行缩放时，不会改变布局视口的大小，但会改变视觉窗口的大小。

我们可以通过window.innerWidth来获取视觉视口大小。

理想视口（ideal viewport）

理想中的视口。这个概念最早由苹果提出，其他浏览器厂商陆续跟进，目的是解决在布局视口下页面元素过小的问题，显示在理想视口中的页面具有最理想的宽度，用户无需进行缩放。所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。

当页面缩放比例为100%时，理想视口 = 视觉视口。

我们可以通过screen.width来获取理想视口大小。

理想视口就是设备独立像素，1个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰

meta viewport

对于移动端页面，可以采用<meta>标签来配置视口大小和缩放等。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width：该属性被用来控制视窗的宽度，可以将width设置为320这样确切的像素数，也可以设为device-width这样的关键字，表示设备的实际宽度，一般为了自适应布局，普遍的做法是将width设置为device-width。
height：该属性被用来控制视窗的高度，可以将height设置为640这样确切的像素数，也可以设为device-height这样的关键字，表示设备的实际高度，一般不会设置视窗的高度，这样内容超出的话采用滚动方式浏览。
initial-scale：该属性用于指定页面的初始缩放比例，可以配置0.0～10的数字，initial-scale=1表示不进行缩放，视觉窗口刚好等于理想窗口，当大于1时表示将视窗进行放大，小于1时表示缩小。这里只表示初始视窗缩放值，用户也可以自己进行缩放，例如双指拖动手势缩放或者双击手势放大。安卓设备上的initial-scale默认值： 无默认值，一定要设置，这个属性才会起作用。在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
maximum-scale：该属性表示用户能够手动放大的最大比例，可以配置0.0～10的数字。
minimum-scale：该属性类似maximum-scale，用来指定页面缩小的最小比例。通常情况下，不会定义该属性的值，页面太小将难以浏览。
user-scalable：该属性表示是否允许用户手动进行缩放，可配置no或者yes。当配置成no时，用户将不能通过手势操作的方式对页面进行缩放。

这里需要注意的是viewport只对移动端浏览器有效，对PC端浏览器是无效的。

适配与缩放

为了让移动端页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口，所以我们一般会设置width=device-width，这就相当于让布局视口等于理想视口；设置initial-scale=1.0，相当于让视觉视口等于理想视口；这时，1个CSS像素就等于1个设备独立像素。

上面提到width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是width和视觉视口宽度的最大值。

例如：若手机的理想视口宽度为400px，设置width=device-width，initial-scale=2，此时视觉视口宽度 = 理想视口宽度 / initial-scale即200px，布局视口取两者最大值即device-width 400px。

若设置width=device-width，initial-scale=0.5，此时视觉视口宽度 = 理想视口宽度 / initial-scale即800px，布局视口取两者最大值即800px。

decive-width就是理想视口

width = decive-width就是让布局视口等于理想视口，width就是布局视口

initial-scale=1.0就是让视觉视口等于理想视口

布局视口的宽度值取决于width和视觉视口的最大值

视觉视口宽度 = 理想视口宽度 / initial-scale

initial-scale = 理想视口宽度 / 视觉视口宽度

页面的缩放系数 = CSS像素 / 设备独立像素，实际上说页面的缩放系数 = 理想视口宽度 / 视觉视口宽度更为准确

当页面缩放比例为100%时，CSS像素 = 设备独立像素，理想视口 = 视觉视口。

rem

rem（font size of the root element）是CSS3新增的一个相对单位，是指相对于根元素的字体大小的单位。

function setRootRem() {
    const root = document.documentElement;
    /** 以iPhone6为例：布局视口为375px，我们把它分成10份，则1rem = 37.5px，
     * 这时UI给定一个元素的宽为375px（设备独立像素），
     * 我们只需要将它设置为375 / 37.5 = 10rem。
    */
    const scale = root.clientWidth / 10
    root.style.fontSize = scale + 'px'  
}
setRootRem()
window.addEventListener('resize', setRootRem)

将html节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的

比如布局视口为375px，则1rem = 37.5px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 37.5 = 2rem。

vw vh

vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位，是css3中提出来的，基于视图窗口的单位。

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。

vw(Viewport's width)：1vw等于视觉视口的1%
vh(Viewport's height) :1vh 为视觉视口高度的1%
vmin : vw 和 vh 中的较小值
vmax : 选取 vw 和 vh 中的较大值

如果按视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。

viewport+PX

这种方案可以让我们在开发时不用关注设备屏幕尺寸的差异，直接按照设计稿上的标注进行开发，也无需单位的换算，直接用px。

在 HTML 的 head 标签里加入 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" > 。

假如UI给我们提供的设计稿宽度时375px，我们则需要将页面的viewport的width设为375，然后再根据设备的逻辑像素将页面进行整体放缩。

export function initViewport() {
    const width = 375;  // 设计稿宽度
    const scale = window.innerWidth / width
    // console.log('scale', scale)
    let meta = document.querySelector('meta[name=viewport]')
    let content = `width=${width}, init-scale=${scale}, user-scalable=no`
    if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
    }
    meta.setAttribute('content', content)
}