移动Web开发基础-利用VW单位适配布局

前言

前面我们分享 移动Web开发基础-rem布局 的时候提到了两个方案。方案的最终目的都是为了形成一个“流单位”。
方案一是通过媒体查询给html设置font-size,密集的断点设置形成“流单位”。
方案二是通过JS脚本根据设备显示屏大小动态计算出根元素字体大小,这个计算结果几乎是连续的“流单位”。

两个方案的对比,我们常用的当然也是建议的方案是第二个。
目前来看,方案二存在一个问题是JS和HTML没有得到解耦,这里有一个视口单位VW天生就是“流单位”。
如果对视口相关知识点不熟悉的话可以阅读 移动Web开发基础-Viewport

认识视口单位

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

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个
视口单位区别于%单位,视口单位是依赖于视口的尺寸,根据视口尺寸的百分比来定义的;而%单位则是依赖于元素的祖先元素。

这里写图片描述

兼容性

目前常用的浏览器版本都是兼容该单位的,正说明我们可以开始使用视口单位来实现适配布局了。

这里写图片描述

使用VW布局页面

(以下都以iPhone 6的尺寸为例)

方案一:
最简单的方案就是所有的布局元素及属性都用VW来做单位,对应关系是:
设计稿 750px——>100vw
那我们书写时计算:(x/750)*100vw
sass:

$vw_base: 750; 
@function vw($px) {
    @return ($px / 750) * 100vw;
}

方案二:
沿用rem布局方案,所有的布局元素及属性都用rem做单位,用vw单位给html设置font-size形成“流单位”,这样就不再需要JS来动态计算根元素字体大小。

如果以前你习惯了约定750px设计稿的根元素字体大小为100px的话,你可以直接设置:

//750px设计稿
html{
	font-size: 13.3333vw;//(100px/750px)*100vw
}
//640px设计稿
html{
	font-size: 15.625vw;//(100px/640px)*100vw
}
//1080px设计稿
html{
	font-size: 9.25926vw;//(100px/1080px)*100vw
}

20181214补充
也可以通过css的计算函数自动计算配置。

/* 设计稿宽度为750px,根字号为100px */
:root{
	--psd: 750;
	--rfz: 100;
}
html{font-size: calc(100vw / var(--psd) * var(--rfz));}

@media screen and (min-width: 750px) {
    html{font-size: 100Px;}
    body{width: 750px;}
}
body{
	max-width: 750Px;
    margin: 0 auto;
}

如果用过flexible适配方案的话,可能会更接受通过sass来计算,而且可以通过计算给body设置最大宽度和最小宽度,带来更好的体验。

// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相当于20vw
    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 32px;
    }
    @media screen and (min-width: 540px) {
        font-size: 54px;
    }
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

总结

根据以上分析,我们推荐方案二,这样也就不存在rem布局的相关问题了。用sass方便快捷的开始vw适配布局吧。


参考来源:
1.利用视口单位实现适配布局
2.再聊移动端页面的适配

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页