自适应，视口单位

目前就我了解的自适应两种方式：

1. 在移动端中利用rem的相对于根HTML进行改变，通过一段JS实现了移动端自适应
2. 使用纯CSS视口单位来自行自适应

纯CSS3使用vw和vh视口单位实现自适应
像素与浏览器视口的细节
使用VH和VW实现真正的流体排版
谈谈rem与vw — rem

“自适应布局”，它又叫做响应式布局，主要是针对页面在不同的设备，不同的屏幕大小，不同的分辨率下对页面布局的自动适应，我的理解就是等比例缩放（任何设备或者窗口任意改变的情况下）。

响应式布局的实现依靠***媒体查询***（ Media Queries ）来实现
@media 可以针对不同的屏幕尺寸设置不同的样式

通过 rem 单位来实现适配，内嵌一段脚本去动态计算根元素大小。这样比较麻烦，就需要新的办法去真正地适配所有设备尺寸。

通常用的相对字体单位（注* 如px, pt, em）只是相对于HTML根元素的大小而自动改变，而不是相对于用户的屏幕。于是引入了视口单位

认识视口单位（ Viewport units )

在桌面端，视口指的是浏览器的可视区域；
而在移动端较为复杂，它涉及到三个视口：分别是
Layout Viewport（布局视口）、
Visual Viewport（视觉视口）、
Ideal Viewport。

视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。

视口单位是根据浏览器的视口尺寸的百分比来定义的。
而百分比是元素的祖先元素来决定的。

根据CSS3规范，视口单位主要包括以下4个：

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

mdn上的单位介绍
css88上的单位介绍
w3chool上的单位介绍
菜鸟教程的单位介绍

Bootstrap之类的响应式布局CSS框架多采用 @media (max-width: *) {} 之类响应式样示实现。

// 屏幕宽度小于767个象素时应用的CSS样式
@media (max-width: 767px) {
   //CSS代码 
}

// 屏幕宽度在767和991象素之间的CSS样式
@media (min-width: 768px) and (max-width: 991px) {
   //CSS代码 
}

此法在大小在跨过临界值时才会发生改变。而vh,vw这样的单位会随窗口大小而立刻发生改变。

体验一下媒体查询的实例

================================================
响应式布局和自适应的区别：

首先两种的方式的解决问题是不一样的。

自适应是一套模板适应所有终端，但每种设备上看到的版式是一样的，俗称宽度自适应。

响应式一套模板适应所有终端，但每种设备看到的版式可以是不一样的。

自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。
响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。

响应式布局的一些技术点纪录：

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度，多点百分比

(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置

(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

(5)选择加载css，，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

如何实现，参考网页
https://www.cnblogs.com/yuanziwen/p/6926561.html