vh与vw的使用事项

最新推荐文章于 2022-04-28 11:45:00 发布
最新推荐文章于 2022-04-28 11:45:00 发布
阅读量768 收藏 1
点赞数
分类专栏： CSS/CSS3 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40666120/article/details/106663270
版权

vw — 1vw 等于视口宽度的 1%
vh — 1vh 等于视口高度的 1%
vmin — vw 和 vh 中的较小值
vmax — vw 和 vh 中的较大值

  • calc经常被使用在计算剩下的宽度或者高度，可以根据机型动态改变布局的宽度或者高度，但是使用过程中有以下注意事项
style="height:calc(100vh - {{pageTopHeight}}px - 174rpx )"

在代码中运算符的前后必须要有 空格 才能生效

向前有光
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3使用vw和vh视口单位实现自适应-sass基础-
qq_32265719的博客
06-30 439
<style lang="scss" scoped> //纯CSS3使用vw和vh视口单位实现自适应 // rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推 $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值 @function rem($px) { @return ($px / $vm_fontsize ) * 1rem; } // body 也增加最大最
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
2. **vw、vh与%的区别** - **%单位**：基于元素的父元素尺寸，而vw和vh是基于浏览器视窗的尺寸。这意味着使用vw和vh，你可以更容易地创建跨设备、跨屏幕方向的一致布局。 - **优势**：特别是在处理动态高度（如...
Vh和Vw的简介和使用
热门推荐
tian361zyc的博客
05-23 1万+
Vw和Vh
vw和vh
weixin_45899362的博客
03-06 9348
1.基本概念 vw/vh是一个相对单位（类似于em,rem) vw：viewport width 视口宽度单位 vh：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 注意：和百分比是有区别的，百分比时相对于父元素来说得，而vw和vh总是针对于视口来说的。 2.使用vw 开发设计中使用vw，需要使用像素大厨将模式改为2X 使用vw，还原设计稿需要做 确定设计稿视口宽度。如375 直接使用测量数值/（视口宽度/
vw /vh
MDR_0820的博客
10-13 175
vw 、vh 是一个相对单位 （类似em 和 rem相对单位） vw 是 viewport width 视口宽度单位 vh 是 viewport hight 视口高度单位 相对视口的尺寸计算结果 1vw=1%（百分之1）视口宽度 1vh=1%(百分之1） 视口高度 注意 vw 、vh 是和百分比有区别的 百分比是相对父级的 而vw vh 是针对于当前视口的 ...
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
css3新单位vw、vh的使用教程
09-24
主要介绍了css3新单位vw、vh的使用教程，本文通过实例代码给大家介绍vw、vh、vmin、vmax 的含义及vw、vh与%百分比的区别，感兴趣的朋友一起看看吧
vh或vw单位
01-28
### vh与vw单位详解 在前端开发中，为了实现页面元素能够随着屏幕尺寸的变化而自动调整，响应式布局成为了一种常见的解决方案。其中，`vh`（viewport height）和`vw`（viewport width）作为视窗单位，在实现响应式...
浅析rem和em和px vh vw和% 移动端长度单位
09-24
下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
vh和vw
langrentao的博客
03-07 455
vh:相对于视窗的高度，那么vw:则是相对于视窗的高度
css3遮罩层_CSS3 - 新单位vw、vh、vmin、vmax使用详解（附样例）
weixin_39778447的博客
11-22 140
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。一、基本说明1，vw、vh、vmin、vmax 的含义(1)vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的，单位 1，代表类似于 1%。视窗(V...
vh与vw
weixin_44471622的博客
05-07 658
1. vh vh是当前屏幕可见高度的1%，height:100vh == height:100%; 注意：当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开，其高度与屏幕高度一致。 2.vw vw就是当前屏幕宽度的1% 注意：设置width:100%，被设置元素的宽度是按照父元素的宽度来设置， 但是100vw是相对于屏幕可见宽度来设置的...
vw和vh单位
lol282582949的博客
03-01 1968
vw和vw单位 vw和vh都是视口单位 即view width / view height 相对单位：表示把屏幕分为了100份，1份等于1% 1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。 以下是不同屏幕下的占比 很明显，可以看出vw和vh单位是可以在不调用JS的同时， 实...
vw\vh的介绍
Be myself
03-06 4597
vw\vh的介绍？ 1.什么事vw(Viewport Width)和vh（Viewport Height）？ 1.1 vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位。 1.2 系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。 1.3 vw、vh和百分比不同的是，百分比永远都是以父元素为参考，而vw、vh是以视口作为参考。 结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。 2.什么是v...
vw / vh属性布局了解及使用
m0_62181310的博客
04-28 4606
使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果 目录 一、vw和vh基本使用 二、vw和vh布局流程 三、vh布局弊端 一、vw和vh基本使用 vw和vh为相对单位，相对视口尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m.
day06 移动适配：vw/vh
weixin_43730921的博客
02-09 511
移动适配：vw/vh
完美的响应式布局vw+vh+rem视口布局
Seven的博客
07-28 8740
完美的响应式布局vw+vh+rem 视口布局VM和VH是什么？VM、VH 与rem的使用1、页面布局2、响应垂直居中3、模仿bootstrap的栅栏布局4、rem布局-解决字体适配（此布局在weex中无法识别）5、vw、vh、rem的使用 VM和VH是什么？ vw和vh是视口（viewport units）单位， 何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。 vw是可视窗口的宽度单位，和百分比有点一样
vh和vw单位有什么区别
最新发布
06-10
因此，当你需要根据视口大小调整元素的高度时，可以使用`vh`，而当你需要根据视口大小调整元素的宽度时，可以使用`vw`。 需要注意的是，`vh`和`vw`都是相对于视口大小计算的，因此在不同的设备和屏幕上可能会有不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值