css3vw适配_使用vw+rem实现移动端适配

利用视口单位实现适配布局

响应式布局的实现依靠媒体查询( Media Queries )来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。即使使用rem方式来布局，也需要写一段js代码来动态改变根元素的大小。比较成熟的做法如手淘的做法。使用Flexible实现手淘H5页面的终端适配

现在我们介绍一种全新的适配方式即：利用视口单位来实现适配这样就不用引入多余的js代码

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

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

详细文章可参考再聊移动端页面的适配

做法一：只使用vw做css单位

使用vw作为css单位就涉及到设计师的设计稿如何转化未vw的问题。

使用sass做为函数编译

//以iphone6的设计稿举例

$base_vw = 375;

@function vw ($px) {

return ($px/$base_vw) * 100vw

};

复制代码使用

#app {

width: 100%;

.container {

padding: vw(20) vw(20) vw(20) vw(20)

.main {

width 100%

>h1 {

font-size 14px

}

}

}

}

复制代码高清屏一个像素解决

.border-1px-bottom {

position: relative;

&::after {

content: '';

position: absolute;

z-index: 1;

background-color: #f8f8f8;

height: 1px;

left: 0;

right: 0;

top: 0;

pointer-events: none;

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

-webkit-transform: scaleY(0.5);

-webkit-transform-origin: 50% 0%;

}

}

}

复制代码对于banner要实现高宽比的图需要使用padding-top

.banner {

position: relative;

padding-top: percentage(100/750); // 使用padding-top

height: 0;

overflow: hidden;

img {

width: 100%;

height: auto;

position: absolute;

left: 0;

top: 0;

}

}

复制代码

做法二：使用vw+rem做css单位

虽然vw能更优雅的适配，但是还是有点小问题，就是宽，高没法限制。那么结合rem就可以完美解决啦。

// 设置html根元素的大小 750px->75 640px->64

// 将屏幕分成10份，每份作为根元素的大小。

$vw_fontsize: 75

@function rem($px) {

// 例如：一个div的宽度为100px，那么它对应的rem单位就是(100/根元素的大小)* 1rem

@return ($px / $vw_fontsize) * 1rem;

}

$base_design: 750

html {

// rem与vw相关联

font-size: ($vw_fontsize / ($base_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;

}

复制代码

使用

#app {

width: 100%;

.container {

padding: rem(20) rem(20) rem(20) rem(20)

.main {

width 100%

>h1 {

font-size 14px

}

}

}

}

复制代码

参考凹凸实验室