做法一：仅使用vw作为CSS单位
原文链接：/vw-vh.html
在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下，我们遵守：·
1.对于设计稿的尺寸转换为vw单位，我们使用Sass函数编译
//iPhone 6尺寸作为设计稿基准$vm_base: 375; @function vw($px) {@return ($px / 375) * 100vw;}
2.无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位
.mod_nav {background-color: #fff;&_list {display: flex;padding: vm(15) vm(10) vm(10); // 内间距&_item {flex: 1;text-align: center;font-size: vm(10); // 字体大小&_logo {display: block;margin: 0 auto;width: vm(40); // 宽度height: vm(40); // 高度img {display: block;margin: 0 auto;max-width: 100%;}}&_name {margin-top: vm(2);}}}}
3.1物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）采用 transform 属性 scale 实现。
.mod_grid {position: relative;&::after {// 实现1物理像素的下边框线content: '';position: absolute;z-index: 1;pointer-events: none;background-color: #ddd;height: 1px;left: 0;right: 0;top: 0;@media only screen and (-webkit-min-device-pixel-ratio: 2) {-webkit-transform: scaleY(0.5);-webkit-transform-origin: 50% 0%;}}...}
4.对于需要保持高宽比的图，应改用 padding-top 实现
.mod_banner {position: relative;padding-top: percentage(100/700); // 使用padding-topheight: 0;overflow: hidden;img {width: 100%;height: auto;position: absolute;left: 0;top: 0; }}
由此，我们能够实现一个常见布局的页面效果如下：
原文链接：/vw-vh.html
做法二：搭配vw和rem，布局更优化
这样的页面虽然看起来适配得很好，但是你会发现由于它是利用视口单位实现的布局，依赖于视口大小而自动缩放，无论视口过大还是过小，它也随着视口过大或者过小，失去了最大最小宽度的限制。·
当然，你可以不在乎这样微小的不友好用户体验，但我们还是尝试下追求修复这样的小瑕疵吧。
于是，联想到不如结合rem单位来实现布局？rem 弹性布局的核心在于动态改变根元素大小，那么我们可以通过：
给根元素大小设置随着视口变化而变化的 vw 单位，这样就可以实现动态改变其大小。限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度
这样我们就能够实现对布局宽度的最大最小限制。因此，根据以上条件，我们可以得出代码实现如下：
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值@function rem($px) {@return ($px / $vm_fontsize ) * 1rem;}// 根元素大小使用 vw 单位$vm_design: 750;html {font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; // 同时，通过Media Queries 限制根元素最大最小值@media screen and (max-width: 320px) {font-size: 64px;}@media screen and (min-width: 540px) {font-size: 108px;}}// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小body {max-width: 540px;min-width: 320px;}
凹凸实验室https://aotu.io/notes//04/28/-4-28-CSS-viewport-units/
原文链接：/vw-vh.html
