CSS---CSS3新增的vw vh单位

最新推荐文章于 2023-02-27 10:02:27 发布
最新推荐文章于 2023-02-27 10:02:27 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： 移动端---vant CSS 文章标签： css vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h18377528386/article/details/122942946
版权

CSS3中新增了一种视口单位 vw和vh，何谓视口，就是根据你浏览器窗口的大小的单位，不受父元素影响。


在移动端，视口单位相对于布局视口。


 1vw=可视窗口宽度的百分之一，比如窗口宽度是750，则1vw = 7.5px·

1vh =可视窗口高度的百分之一，比如窗口高度是667，则1vh = 6.67px

使用它唯一需要注意的就是它的兼容性:
①在PC端已兼容到IE9


②在移动端iOS 8以上以及Android 4.4以上获得支持，并且在微信×5内核中也得到完美的全面支持Vue本身都只兼容到IE9，更何况这个视口单位了，所以放心大胆的用吧。
 

Cirrod
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS-vw和vh
w20180341314的博客
02-23 163
CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
CSS3中的视窗单位vw、vh、vmin和vmax为现代网页设计提供了更灵活的布局方式，尤其在响应式设计中发挥着重要作用。这些单位允许开发者基于浏览器的视窗大小来定义元素的尺寸，而不是依赖于父元素或固定像素值。 1. *...
postcss-px-to-viewport:PostCSS的插件，可从像素单位生成视口单位（vw，vh，vmin，vmax）。 通过一个设计尺寸在不同的显示器上创建可扩展界面的最佳选择
05-02
postcss px到视口 English | 的插件，从像素单位生成视口单位（vw，vh，vmin，vmax）。 演示版 如果您的项目涉及固定宽度，则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; border : 3 px solid black; border-bottom-width : 1 px ; font-size : 14 px ; line-height : 20 px ; } . class2 { padding-top : 10 px ; /* px-to-viewport-ignore */ /* px-to-viewport-ignore-next */ padding-bottom : 10 px ;
CSS——vw和vh
qq_48613863的博客
04-10 1102
vw和vh都是单位，是相对单位，相对于视口的尺寸进行计算， vw：viewport width ，viewport height 1vw = 1/100视口宽度；1vh = 1/100视口高度。 只需要改单位，不用加入flexible.js就可以实现移动适配。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U.
css3新单位vw、vh、vmin、vmax的使用详解（附样例）
JoeBlackZQQ的专栏
08-23 2272
From: http://www.hangge.com/blog/cache/detail_1715.html 像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。   一、基本说明 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位...
CSS3新增的视口单位Vh、Vw单位
weixin_42274805的博客
02-27 959
讲解vw vh
css3新单位vw、vh的使用教程
09-24
主要介绍了css3新单位vw、vh的使用教程，本文通过实例代码给大家介绍vw、vh、vmin、vmax 的含义及vw、vh与%百分比的区别，感兴趣的朋友一起看看吧
纯css3使用vw和vh实现自适应的方法
09-24
CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于视口的尺寸，提供了更直观的方式来定义元素的尺寸，从而实现真正的跨设备自适应。 **视口单位的理解** 视口...
Css-Landing-Page
04-19
此外，CSS还提供了其他一些响应式设计的工具，如百分比单位、vw/vh相对单位、calc()函数等，它们都能帮助开发者创建更加灵活的布局。例如，使用vw/vh单位可以确保元素的大小与视口的宽度或高度关联，从而实现自适应...
css中的vw/vh与%
JYB2106056288的博客
11-02 1123
首先来说说vw/vh,将浏览器的宽高等分为100，浏览器视口的宽高单位。也就是说能智能的计算，包括外接显示器。可以实现元素的自适应宽高：随着浏览器视口变化而变化。的宽高作为100%。例如width:50%;height:50%;就是将父级元素宽度的50%设置为自己的宽度，将父级元素高度的50%设置为自己的高度。最后，希望自己的总结能让各位看官少走弯路吧！vw：若盒子的宽度设置为100vw,也就是浏览器视口宽度。其他博主讲这个的多，但是我觉得没有。
vw vh
qq_40774743的博客
08-23 410
1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。   （2）具体描述如下： vw：视窗宽度的百分比（1vw 代表...
CSS3 的单位vw、vh、px，em，rem
丁哒哒的博客
10-24 685
1、px px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自...
【css3】vh和vw是什么单位？
michiko98的博客
06-09 1512
css3的vh和vw单位
CSS3视窗单位vw、vh、vmin、vmax说明
热门推荐
王乐平 技术博客
01-07 1万+
vw、vh做为CSS3中的新单位，已经出来挺久的了，这里也我个人也做一下详细的总结。说明vw、vh、vmin和vmax是CSS3中的新单位，是一种视窗单位，也是相对单位。它们的大小都是由视窗大小来决定的，单位1，代表类似于1%。具体描述如下：vw：视窗宽度的百分比 vh：视窗高度的百分比 vmin：当前较小的vw和vh vmax：当前较大的vw和vh视窗，指的是浏览器可视区域的宽高，也就是wi
css3的vw单位,vh单位的讲解，以及vw vh的兼容性
u011200562的博客
03-30 1万+
vw vh的介绍 vw,vh是css3中给我们提供的新的单位，他们是相对于viewport视窗的宽高进行计算的单位。说白了，就是相对于浏览器的窗口的大小。 vw单位 vw是相对于视窗宽度的单位， 1vw=1/100浏览器宽度。 vh单位 vh是相对于视窗高度的单位， 1vh=1/100浏览器高度。 vw vh的用途 vw vh相对于浏览器的窗口的大小，代码如下： .div1{ width:...
px、em、rem、%、vw、wh、vm等单位有什么区别？
weixin_44273311的博客
05-06 340
1.背景介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。 2.知识...
css vh使用
dency
08-13 6570
vh 说明： 相对于视口的高度。视口被均分为100单位的vh 示例代码： h1{ font-size:8vh; } 如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100 兼容性： 浅绿= 支持 红色= 不支持 粉色= 部分支持 IE Firefox Chrome Safari Opera iO...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
张木期的博客
07-29 5235
1、px：绝对单位，页面按精确像素展示 2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体...
vw 前端_css3的vw单位,vh单位的讲解，以及vw vh的兼容性
weixin_39935903的博客
12-21 655
vw vh的介绍vw,vh是css3中给我们提供的新的单位，他们是相对于viewport视窗的宽高进行计算的单位。说白了，就是相对于浏览器的窗口的大小。vw单位vw是相对于视窗宽度的单位，1vw=1/100浏览器宽度。vh单位vh是相对于视窗高度的单位，1vh=1/100浏览器高度。vw vh的用途。vw vh相对于浏览器的窗口的大小，代码如下：.div1{width:50vw;height:50...
vant3 postcss-to-viewport 字体变小
最新发布
05-10
vant3 是一款基于 Vue.js 的移动端 UI 组件库，postcss-to-viewport 是一款 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位，以实现响应式布局。在使用 vant3 和 postcss-to-viewport 时，会遇到字体变...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值