-
vw和vw单位
2020-02-29 22:15:35那么它们之间有什么关系,vw和vw单位究竟是什么呢? rem布局是移动端布局的非常常见的一种方案,很多大网站也都采用了这种方案,它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备,在不同的...这周在逆战班学习了弹性布局,网格布局,以及移动端布局和响应式布局等。其中在移动布局有两种方案,流式布局和rem布局,这里我讲的vw以及vw单位就是与rem布局息息相关的。 那么它们之间有什么关系,vw和vw单位究竟是什么呢? rem布局是移动端布局的非常常见的一种方案,很多大网站也都采用了这种方案,它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备,在不同的分辨率下等比放大,始终给用户很协调的感觉。 这里展示下效果图:
(
这是在iphone6/7/8下面的效果。
再看下图:
(图2)
这是iPad下的效果。为了对比明显我并没有选择iPhone plus,我们可以在上方看到分辨率的对比,iPad的分辨率比iPhone6多出一倍多,但是界面依然很好的展示出来了,仔细观察四周的间隙并没有变,整体还是非常协调,与此同时我们也可以明显的看出此时屏幕所能显示内容变少了,这也就是他的缺点。那么rem布局究竟如何实现的呢?1.rem
rem事实上就是一个相对单位,在之前我们学习过em这个单位,它就是相对于父元素或者当前元素的font-size值的,1em1个font-size的大小,而rem其实也是相对font-size的,不同的是它是相对根元素的font-size的,1rem1个根元素的font-size。利用rem的这个特性就可以实现rem布局了。
先给html的font-size设置一个固定值,通常设置100px就可以了,因为好计算,在网页中我们一般不要让字体## 标题大小小于12px,然后1rem就等于100px,这样转换下来rem页面就可以实现了。
这里展示下一个简单的案例:
首先还是照常写下html结构:菜谱推荐结构写完接着是css样式:
/* css reset */*{margin: 0;padding: 0;}
img{display: block;}
a{text-decoration: none;}/* css common */
html{font-size: 100px;}
body{font-size: 0.16rem;}/* css header */
#header{height: 0.44rem;background: #02D1C5;}
#header span{font-size: 0.18rem;color: #FEFEFE;text-align: center;line-height: 0.44rem;display: block;}/* css search */
#search{width: 2.5rem;height: 0.25rem;background: #F3F3F3;margin: 0.2rem 0.61rem 0.21rem 0.64rem;display: flex;}
#search input{width: 2.19rem;height: 100%;border: none;background: none;}
#search span{width: 0.17rem; margin-left: 0.1rem;margin-right: 0.04rem;display: block;margin-top: 0.02rem;}/* css banner */
#banner{width: 100%;height: 1.5rem;}
#banner img{width: 100%;height: 100%;}/* css nav */
#nav{width: 100%;height: 0.88rem;display: flex;justify-content: space-evenly;align-items: center;}
#nav a p{width: 1.65rem;height: 0.5rem; border-radius: 0.02rem;box-shadow: 0.02rem 0.02rem 0.1rem 0.02rem #cccccc;text-align: center;line-height: 0.5rem;color: #02D1C5;}
#nav a p span{font-size: 0.25rem;margin-right: 0.17rem;}/* css main */
#main{margin-bottom: 0.7rem;}
#main h3{font-size: 0.16rem;color: #666666;margin-left: 0.49rem;margin-bottom: 0.1rem;}
#main div{width: 3.45rem;margin: 0 auto;}
#main div a{display: block;width: 3.45rem;height: 1.25rem;margin-bottom: 0.15rem;position: relative;}
#main div a img{width: 100%;height: 100%;}
#main div a div{width: 100%;height: 100%; position: absolute;left: 0;top: 0;background: rgba(83,83,83,.5);text-align: center;line-height: 1.25rem;font-size: 0.2rem;color: white;border-radius: 0.2rem;}/* css footer */
#footer{width: 100%; height: 0.5rem;display: flex;justify-content: space-around;background: white;position: fixed;bottom: -0.01rem;}
#footer a {display: block;height: 100%;color: #666666;text-align: center;font-size: 0.14rem;}
#footer a span{font-size: 0.24rem;}
#footer a.active{color: #02D1C5;}
#footer a.footer-content{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #02D1C5;font-size: 0.22rem;color: white;line-height: 0.5rem;position: relative;bottom: 0.24rem;}这个结构所有数据都是写在iPhone 6的分辨率基础上的,它的效果也成功地实现了,具体效果可以参考图1,但是要注意,这个时候如果我们切换了设备,那html的font-size是不会智能的切换的,rem也就没做到适配了。仅仅是这样我们是实现不了图2的效果的,不妨看下此时它在iPad下的效果:
(图3)
这个时候可以发现它和图2的效果差别是非常大的,那么rem怎么做到等比缩放呢,这里就要用到vw了。2.vw
vw也是一个单位,并且也是一个相对单位: vw -> view width vh -> view height 相对单位:表示把屏幕自动分成了100vw宽和100vh高。 vw / vh : 把屏幕分为100份,1vw等于屏幕宽的1%。 这里的100份,它是适用于各种分辨率下的,不管是宽375px的设备,还是414px的都是一样的效果。 假设屏幕是375px -> 100vw -> 1vw == 3.75px 假设屏幕是414px -> 100vw -> 1vw == 4.14px 在实际操作中我们一般都会选择iphone6的设备,它的宽度就是375px的,于是我们可以进行一个简单的计算 1vw == 3.75px ? -> 多少个vw == 100px -> 26.666667vw -> 100px
所以fong-size:100px == font-size:26.666667vw
了解了vw的原理我们只需要对上述案例的代码进行小小的带动就可以了,如下所示:
html{font-size: 26.666667vw;}
这样无论任何设备下,就都可以自动运算转换进行适配了。3.拓展
在实际操作中计算也是很容易的,如果设置的数值因为种种需要不好计算,比如font-size:75px,那我们也可以用vscode中的插件px to rem
(图4)
然后按上图设置一下,无论需要跟元素的font-size是多少,只需要改动px-per-rem的数值就可以了,比如我这里设置的就是100,然后回到代码页面选中需要改动的代码,按下快捷键alt+z就可以全部改成rem了。 -
vw 前端_css中vw是什么意思?
2020-12-21 21:43:48在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。CSS 单位是一种量度单位,包括尺寸单位和颜色单位。我们常使用向对...在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。
CSS 单位是一种量度单位,包括尺寸单位和颜色单位。我们常使用向对单位,不会使得网页在不同的视图下造成布局混乱的情况。
vw是Viewport's width的缩写形式,1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。
vw优势在于能够直接获取宽度,而用 % 在没有设置 body 宽度的情况下,是无法正确获得可视区域的宽度的,所以这是挺不错的优势。
这里的视口指的是浏览器可视区域,图示如下:
示例代码:h1{font-size:8vw;}
如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100
兼容性:
示例:
p{font-size:5vw;}
相对于viewport宽度大小的文字
-
vh和vw自适应布局单位
2019-02-09 13:05:15先要弄懂它是什么就先看看什么是视口 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想...在解决居中问题的时候,看到一种写法:100vh
先要弄懂它是什么就先看看什么是视口
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范,视口单位主要包括以下4个:
1.vw:1vw等于视口宽度的1%。
2.vh:1vh等于视口高度的1%。
3.vmin:选取vw和vh中最小的那个。
4.vmax:选取vw和vh中最大的那个。
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。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;这样可以把一个元素设置在屏幕的正中间。
-
vw 前端_前端常用开发单位-vw
2020-12-21 21:43:21前端常用开发单位-vw05-前端开发常用单位-vwvh*{margin: 0;padding: 0;}/*div{*//* width: 10vmin;*//* height: 10vmax;*//* background: red;*//*}*/div{width:1vw;...什么是vw(Viewport Width...前端常用开发单位-vw
05-前端开发常用单位-vwvh*{
margin: 0;
padding: 0;
}
/*div{*/
/* width: 10vmin;*/
/* height: 10vmax;*/
/* background: red;*/
/*}*/
div{
width:1vw;
height: 1vh;
background: red;
}
/*
1.什么是vw(Viewport Width)和vh(Viewport Height)?
1.1vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
1.2系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
1.3vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
而vw和vh永远都是以视口作为参考
结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
2.什么是vmin和vmax?
vmin: vw和vh中较小的那个
vmax: vw和vh中较大的那个
使用场景: 保证移动开发中屏幕旋转之后尺寸不变
* */
console.log(window.innerWidth, window.innerHeight);
let oDiv = document.querySelector("div");
console.log(getComputedStyle(oDiv).width);
console.log(getComputedStyle(oDiv).height);
效果:
-
css中的vw
2021-02-08 15:27:27css中的vw是什么单位? 在css中,vw是一个长度单位,一个视口单位,是指相对于视口的宽度;视口会被均分为100单位的vw,则1vw等于视口宽度的1%,比如浏览器的宽度为1920px,则“1vw=1920px/100=19.2px”。 视口单位... -
视口单位vh,vw
2020-09-09 20:42:52在桌面端,视口单位指的是桌面端,指浏览器的可是范围。 1,vh:1vh指视口高度的1% 2,vw:1vw指视口宽度的1% 3,vmin:选取vh和vm中较小的一个 4,vmax:选取vh和vm中较大的一个 注意: 1,视口总共有100个单位,... -
px、em、rem、%、vw、wh、vm等单位有什么区别?
2019-05-20 10:49:29【px、em、rem、%、vw、wh、vm等单位有什么区别?】 这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度... -
em表示什么长度单位_CSS:度量单位(px,em,rem,vw,%等)
2021-01-04 22:44:17Photo by Charles Deluvio on ... 浏览器当前支持16种度量单位:像素,英寸,皮卡,厘米,毫米,点,百分比,em,rem,视口尺寸(vw,vh),ex,ch,Vmax(最大视口)和vmin (viewportmin)在这16个单位中有两类:相对长... -
px、em、rem、%、vw、vh、vm等单位有什么区别?
2018-12-26 17:05:57这里是修真院前端小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】...【px、em、rem、%、vw、vh、vm等单位有什么区别?】 px、em、rem、%、vw、vh、vm等单位有什么区别? 大家好,我是IT修真院西安分... -
css3vw适配_css3长度单位vw、vh、rem 详解
2021-01-14 13:01:43vw、vh、vmin、vmax这四个单位都是基于视口的。那么,什么是视口呢,我们来看一段代码:其中,浏览器利用 meta 标签里面的 width 来改变浏览器的视口大小,将 width 设置为设备的宽度 device-width。我们可以使用... -
CSS3视口单位vw、vh
2020-05-21 17:24:53什么是视口? 在PC端,视口指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口”,PC端指的是... -
em表示什么长度单位_理解前端尺寸vw、vh、rem、em
2021-01-04 20:26:28之前,一直没有对这几个尺寸实战过,也主要从事与pc端...emem 是一个相对长度单位。其相对于当前对象内文本的字体尺寸,。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定... -
css3自适应布局单位vw,vh
2020-11-02 11:32:25什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口... -
css3自适应布局单位vw和vh
2019-06-03 15:09:46css3自适应布局单位vw,vh你知道多少? 视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport... -
CSS3自适应布局单位vw,vh
2020-08-28 15:20:39在说这两个单位之前,我们首先明白一个概念,什么是视口(Viewport)? 在桌面端,视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小; ... -
css3vw适配_css3自适应布局单位vw,vh详解
2021-01-14 13:01:45视口单位(Viewport units)什么是视口?在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。... -
CSS3的vw和vh视口单位
2018-03-27 09:42:26认识视口单位( Viewport units )首先,我们要了解什么是视口。在业界,极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端,视口指的是在桌面端,指的是浏览器的可视... -
css3自适应单位vw,vh详解
2021-02-02 13:35:06在CSS3中,新增了很多长度单位,今天就来谈谈: vw、vh、vmin、vmax 1.什么是视口? 在客户端,视口指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口... -
vw 前端_css3自适应布局单位vw,vh你知道多少?
2021-01-13 05:10:08视口单位(Viewport units)什么是视口?在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。... -
CSS3自适应布局单位 —— vw,vh
2019-09-29 01:44:241. 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 2. 视口单位vw,... -
css 自适应布局单位vw,vh
2019-10-14 14:47:51什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口”,... -
css3自适应布局单位vw,vh你知道多少?
2021-01-27 14:18:16什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域; 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。 视口单位中的“视口”,...
-
MySQL 四类管理日志(详解及高阶配置)
-
2021-02-27
-
移动手机用户体验的三个层次
-
PHP深入理解-PHP架构布局
-
FTP 文件传输服务
-
智能停车场云平台(附vue+SpringBoot前后端项目源码)
-
Cmake 教程
-
使用vue搭建微信H5公众号项目
-
敏捷个人:内容框架之执行力
-
五金机械工具箱电商淘宝详情页设计模板.zip
-
php底层运行机制与原理
-
程序员必修基础套餐课
-
基于电商业务的全链路数据中台落地方案(全渠道、全环节、全流程)
-
虚幻4引擎基础
-
Linux Mint PC机Wifi工作但是Cable插入无法识别
-
MySQL 高可用工具 heartbeat 实战部署详解
-
牛牛量化策略交易
-
2021年 系统架构设计师 系列课
-
Lambda 函数式接口Predicate(基础)(练习)
-
项目管理工具与方法