vw移动端适配

2018-9-11 13:04| 作者: admin| 查看: 1543| 评论: 0|来自: 蚂蚁部落

使用rem为单位进行适配的目的是为了得到一个与屏幕宽度相关的单位,比如1rem=device-width/10,1rem等于十分之一屏幕宽度。其实vw更加合适,1vw等于百分之一的屏幕宽度,随着软硬件设备的更新,现在可以考虑利用vw来实现适配。

关于vw的用法可以参阅CSS3 vw一章节。

关于rem适配可以参阅rem移动端适配一章节。

实现适配的原理和rem是一样的,简单介绍如下:

(1).假如设计稿的宽度是750px,那么1vw=7.5px。

(2).根据设计稿将px转换为vw,手动计算非常麻烦,可以使用postcss-px-to-viewport插件。

(3).如果使用iphone6访问此页面,iphone6的设备宽度为375px,那么1vw=3.75px,自动实现了缩放适配,对于其他设备也是如此。当然也可以根据dpr进行视口的缩放,比如iphone6,缩放0.5之后,视觉视口的宽度变为750px,类似于淘宝的flexible.js方案。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
html {
  font-size:18px;
}
#antzone {
  width:50vw;
  height:25vw;
  background-color:green;
  text-align:center;
}
</style>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

代码虽然简单,但是足以演示vw适配的特性,div宽度始终是所在视口宽度的一半,随着视口的尺寸的变化,div的尺寸会等比例改变,以此来适配各种终端设备。

元素的尺寸推荐使用vw,但是字体大小依然推荐使用px。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部