vh,vw单位你知道多少？

From: https://mp.weixin.qq.com/s/G7ZYCiO__4g2LjRuNl32Ew

响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。
比如：

(function (doc, win) {

let docEl = doc.documentElement

let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

let recalc = function () {

var clientWidth = docEl.clientWidth

if (!clientWidth) return

docEl.style.fontSize = 14 * (clientWidth / 320) + 'px'

}

if (!doc.addEventListener) return

win.addEventListener(resizeEvt, recalc, false)

doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window)

那有没有一个单位不需要JS和CSS耦合在一起的单位？答案是有的，就是vw／vh。

vw = view width

vh = view height

这两个单位是CSS3引入的，以上称为视口单位允许我们更接近浏览器窗口定义大小。

视口单位(Viewport units)

Q：什么是视口？
A：Peter-Paul Koch（”PPK大神”）提出视口的解释是：在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

vh/vw与%区别

单位	解释
vw	1vw = 视口宽度的1%
vh	1vh = 视口高度的1%
vmin	选取vw和vh中最小的那个
vmax	选取vw和vh中最大的那个

比如：浏览器视口尺寸为370px,那么 1vw = 370px * 1% = 6.5px(浏览器会四舍五入向下取7)

vh/vw与%区别在于，

单位	依赖于
%	元素的祖先元素
vh/vw	视口的尺寸

兼容性问题

在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持。

运用

仅使用vw作为CSS单位

使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下

1.根据设计稿的尺寸转换为vw单位(SASS函数编译)

//iPhone 6尺寸作为设计稿基准

$vm_base: 375;

@function vm($px) {

@return ($px / 375) * 100vw;

}

2.无论是文本还是布局高宽、间距等都使用 vw

<div class="mod_nav">

<nav class="mod_nav_list" v-for="n in 5">

<a href="#" class="mod_nav_list_item">

<span class="mod_nav_list_item_logo">

<img src="http://jdc.jd.com/img/80">

</span>

<p class="mod_nav_list_item_name">导航入口</p>

</a>

</nav>

</div>

.mod_nav {

background: #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);

}

会得到这样的效果：

最优做法——搭配vw和rem

使用vm作为css单位代码量确实减少很多，但是你会发现它是利用视口单位实现，依赖于视口大小而自动缩放，失去了最大最小宽度的限制。

所以，我们需要结合rem单位来实现布局，而rem正好可以动态改变根元素大小，做法是：

给根元素大小设置vw–动态改变大小。
限制根元素font-size的最大最小值，配合bosy加上最大最小宽度。

// 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;

}

vh,vw单位你知道多少？相关推荐

记响应式布局vh/vw单位在安卓端微信浏览器以及UC浏览器的坑
页面使用vh来控制元素高度的时候,在安卓端浏览器虚拟键盘弹出时,导致视口高度改变,以至于vh的取值改变 // 正常模式下 100vh = document.documentElement.client ...
css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
css单位-vh/vw
目录视口单位(Viewport units) 1.什么是视口? 2.视口单位中的"视口": 3.视口单位 4.vh与vw与px单位之间的换算 5.举例说明 6.calc 7.实时 ...
vw 前端_css3的vw单位,vh单位的讲解，以及vw vh的兼容性
vw vh的介绍 vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位.说白了,就是相对于浏览器的窗口的大小. vw单位 vw是相对于视窗宽度的单位, 1v ...
纯CSS3使用vw和vh视口单位实现自适应
做法一:仅使用vw作为CSS单位原文链接:http://caibaojian.com/vw-vh.html 在仅使用 vw 单位作为唯一应用的一种 CSS 单位的这种做法下,我们遵守:· 1.对于设 ...
px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
移动端网页开发-vh/vw/rem
第一次做移动端网页开发,接触到的几个单位vh/vw/rem,记录一下. vh:相对可见视区的高度 vw:相对可见视区的宽度 rem:相对根元素的字体大小 "视区"所指为浏览器内部的 ...

vh,vw单位你知道多少？

vh,vw单位你知道多少？相关推荐

最新文章

热门文章