先抄一下网上对vh和vw的解释：
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
开发准备：
1.首先确认大屏尺寸，比如：3000x1500；
2.确认尺寸之后就可以在全局css文件globel.scss中，设置两个变量：$w和$h
$w: 100/3000
$h: 100/1500
3.需要引用该变量的css文件中引入全局css文件；
@import "@common/css/globel.scss";
4.要给某div设置宽度和高度
根据设计图效果，比如设计图上该div宽高：300x200
5.设置如下样式：
width:$w*300vw；
height:$h*200vh;
6.其他所有样式均以此类推；可适应不同分辨率大小的屏幕。
先抄一下网上对vh和vw的解释： vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于...
一、用vw、vh 实现大屏自适应 视口单位中的“视口”，PC端指的是浏览器的可视区域。 vw：1vw 等于视口宽度...
1. vw/vh vw:1vw等于视口宽度的1%vh:1vh等于视口高度的1%vh和vw是相对于适口的高度和宽度，...
CSS3 新增的单位：**vh、vw、vmin、vmax** * vw 和 vh 1、1vw 等于1/100的...
vw/vh这个单位可以根据电脑浏览器自适应vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 ...
1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最...
大屏适配的分类音乐页面 针对高度撑满，对页面进行单位换算 使用单位 vh 实现自动等比的缩放（即使不同屏高度不同，...
参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法
定义 vw: 相对于视窗的宽度。视窗宽度为 100vwvh: 相对于视窗的高度。 视窗高度为 100vh 视窗（视...
在《iPhone屏幕分辨率和适配规则（基础篇）》，《iPhone屏幕分辨率和适配规则（规则篇）》和《iPhone屏...
本文标题：通过vh和vw适配大屏项目和不同分辨率浏览器
本文链接：https://www.haomeiwen.com/subject/ctniaktx.html
网友评论