在移动端中像px、rem、% 这样的长度单位前端开发者肯定都很熟悉（前者为绝对单位，后者为相对单位），rem是相对于根元素<html>，这样就意味着，需要在根元素确定一个px字号，才可以算出元素的宽高，再通过一段JS实现了移动端自适应（好麻烦的说，不过也是一种方法）。

这次我们用一种更方便的：纯CSS视口单位（ Viewport units ) 来实现自适应（虽然现在的兼容性还没法完全接受，但不妨碍认识vw和vh的强大性），那就是vw、vh、vmin、vmax。响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。

近年来，随着移动端对视口单位的支持越来越成熟、广泛，使得我们可以尝试一种新的办法去真正地适配所有设备尺寸。

一、认识视口单位

在PC端，视口指的是在PC端浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口）、Visual Viewport（视觉视口）、Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport（布局视口）。

1.vw、vh、vmin、vmax 的含义

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
使用css3 vw、vh视口单位实现自适应（记录）
（2）根据CSS3规范，视口单位主要包括以下4个：
  • vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  • vh：视窗高度的百分比
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值

2.vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

使用css3 vw、vh视口单位实现自适应（记录）

用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）

3.vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

4.浏览器兼容性

使用css3 vw、vh视口单位实现自适应（记录）

截图内容来自Can I use

（1）桌面 PC
  • Chrome：自 26 版起就完美支持（2013年2月）
  • Firefox：自 19 版起就完美支持（2013年1月）
  • Safari：自 6.1 版起就完美支持（2013年10月）
  • Opera：自 15 版起就完美支持（2013年7月）
  • IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
（2）移动设备
  • Android：自 4.4 版起就完美支持（2013年12月）
  • iOS：自 iOS8 版起就完美支持（2014年9月）

在移动端 ios 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持。

二、小例子

 

其实这只是小结一部分，如果你英文好，不妨可以去看看更详细的（喵觉得写的挺好的）：https://www.smashingmagazine.com/2016/05/fluid-typography/

赏

技术成就梦想，细节成就品质。