简介

vw vh是一种相对单位
相对视口的宽度计算结果
vw viewport width 1vw=1/100视口宽度
vh viewport height 1vh=1/100视口高度

适配原理

1、确定设计稿对应的vw或vh尺寸 (1/视口宽度或高度) 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）
2、vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

//转vw
.box{width: (68 / 3.75vw);height: (29 / 3.75vw);background-color: pink;
}
//转vh
.box1{width: (68 / 6.67vh);height: (29 / 6.67vh);background-color: red;
}

提醒开发中不要vw与vh混用
全面屏视口高度尺寸大，如果混用可能会导致盒子变形

.box {// 68  vw * 29 vh  不推荐width: (68 / 3.75vw);height: (29 / 6.67vh);background-color: pink;
}

CSS vw vh详解相关推荐

css单位vw vh,css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...
css background-attachment属性详解
css background-attachment属性详解 background-attachment属性用途 background-attachment属性用于设置背景图片定位的参照方式 backg ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
CSS超链接样式详解
CSS超链接样式详解 1.超链接伪类 2.深入了解:hover :hover用于div :hover用于img 3.鼠标样式浏览器鼠标样式自定义鼠标样式 1.超链接伪类在CSS中,我们可以使用& ...
css input 内容换行显示,CSS文本换行详解
还记不记得昨天发表的<table表格那点事儿>最后的一个问题不?先撇开问题,我们从头说起. 在网页排版中,有些时候是需要文本自动换行的,对于中文来讲,无需设置属性即可自动实现换行,但是对于 ...

CSS vw vh详解

CSS vw vh详解

简介

适配原理

CSS vw vh详解相关推荐

最新文章

热门文章