css3vw适配_纯CSS3使用vw和vh视口单位实现自适应

做法一：仅使用vw作为CSS单位

在仅使用 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-top

height: 0;

overflow: hidden;

img {

width: 100%;

height: auto;

position: absolute;

left: 0;

top: 0;

}

}

由此，我们能够实现一个常见布局的页面效果如下：

做法二：搭配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/2017/04/28/2017-4-28-CSS-viewport-units/

原文链接：http://caibaojian.com/vw-vh.html