1. 布局视口 Layout viewport
布局视口 (layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。

所以，布局视口是网页布局的基准窗口，在 PC 浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders 、margins、滚动条）。

在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC 的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。

查看布局视口大小

1	document.documentElement.clientWidth / clientHeight

设置布局视口大小

1	<meta name="viewport" content="width=400">

视觉视口 (visual viewport)：用户通过屏幕真实看到的区域。
视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）。

当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。

例如：用户将浏览器窗口放大，这时浏览器窗口中的 CSS 像素会随着视觉视口的放大而放大，这时一个 CSS 像素会跨越更多的物理像素。

所以，布局视口会限制你的 CSS 布局而视觉视口决定用户具体能看到什么。

1	window.innerWidth / innerHeight

# 理想视口 ideal viewport

使用 meta 标签让布局视口的宽度与理想视口的宽度一样，就是设备视口有多宽布局视口就有多宽

# 视口标签 Meta

1	<meta name="viewport" content="width=device-width,user-scalable=no,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"

属性	说明
width	宽度设置的是 viewport 宽度，可以设置 device-width 特殊值
initial-scale	初始缩放比，大于 0 的数字
maximum-scale	最大缩放比，大于 0 的数字
minimum-scale	最小缩放比，大于 0 的数字
user-scalable	用户是否可以缩放比，yes/no,1/0

# 二倍图

需要 50*50 显示在页面，准备 100x100 像素的图，手动缩小为 50 像素的就是二倍图；

1	width:50;height:50; scale(0.5)

# 背景缩放 background-size (背景图的二倍图)

background-size:宽  高
 
background-size:500；高度按比例缩放
 
background-size:50% 相对与父盒子的百分比
 
background-size:cover  完全覆盖盒子大小
 
background-size:contain  宽高完全适应盒子大小

如果有一个 5050 的盒子需要背景图片则需要准备 100100 的图片通过 background-size 来缩小图片

可以用 ps 的 cutterman 切图神器小工具

# 移动端布局 - 单 - 流式布局

流式布局也就是百分比布局，通过盒子宽度设置百分比来根据屏幕宽度进行伸缩，是移动端比较常见的布局方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .big {
        width: 100%;
        height: 200px;
        max-width: 1000px;//设置最大宽度
        min-width: 500px;//设置最小宽度
      }
 
      .big div {
        float: left;
      }
 
      .big div:first-child {
        background-color: blue;
        width: 50%;
        height: 100%;
      }
 
      .big div:last-child {
        background-color: rgb(255, 64, 0);
        width: 50%;
        height: 100%;
      }
    </style>
  </head>
 
  <body>
    <div class="big">
      <div></div>
      <div></div>
    </div>
  </body>
</html>

弹性布局

# 理想视口 ideal viewport

# 视口标签 Meta

# 二倍图

# 背景缩放 background-size (背景图的二倍图)

# 移动端布局 - 单 - 流式布局

3D导航

重新认识flex布局