关于 vm vh 单位

最新推荐文章于 2024-08-28 17:14:56 发布
最新推荐文章于 2024-08-28 17:14:56 发布
阅读量235 收藏
点赞数
文章标签： 面试
原文链接：http://www.cnblogs.com/joesbell/p/6062998.html
版权

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

如果视区宽度是100vw, 则1vw是视区宽度的1/100, 也就是1%，类似于width: 1%。

vh是高度.

 

转载于:https://www.cnblogs.com/joesbell/p/6062998.html

weixin_30299709
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
root + vm vh 实现响应式字体
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-05 2万+
前言 一个网页中最多的东西是啥? 正常人的第一反映肯定是文字，你要是跟我说是图片，那我只能表示： 响应式网页设计中一个很难解决的问题就是文字的大小的问题了，面对千奇百怪的设备，如何解决文字的设配问题，是一个很重要的问题。 在上一篇文章学透CSS-合理使用这8个单位,让你的网站Responsive中我们介绍了8个响应式单位，大多数响应式字体的解决方案基本都是依赖于这几个单位来进行解决的。 最初：@media 下面是两个简单的例子，通过使用媒体查询，改变字体在不同设备下的文字大小。这种做法的缺点在哪里呢？是因
vue的自定义布局（vm/vh）
AyayaOVO的博客
07-11 1888
目录 1. px与视口 2. % 3. 媒体查询 4. rem 5. vm/vh 1. vw/vh的定义 css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下： 这里我们发现视窗宽高都是100vw／100vh，那么vw或者vh，下简称vw，很类似百分比单位。vw和%的区别为： 从对比中我们可以发现，vw单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这
vw vh vm CSS长度单位
weixin_30797027的博客
02-09 246
vw 相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度 vh相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区)100vh = 可视区高度 vmin/vm相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm） 参考： 视区相关单位vw, vh..简介以及可实际应用场景 结论：vw,...
px、em、rem、%、vw、vh、vm等单位有什么区别？
weixin_34006965的博客
12-26 971
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【px、em、rem、%、vw、vh、vm等单位有什么区别？】 px、em、rem、%、vw、vh、vm等单位有什么区别？ 大家好，我是IT修真院西安分...
常见CSS布局单位 px em rem vm vh 、响应式布局如何实现及原理、弹性布局、浮动布局
频繁记录
06-14 1457
常见CSS布局单位 px em rem vm vh 、响应式布局如何实现及原理、弹性布局、浮动布局
px、em、rem、%、vw、vh、vm这些单位的区别
weixin_42192534的博客
05-12 5万+
1.背景介绍我们为什么要选择合适的网页设计单位随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。2.知识剖析1、pxpx就是pixel...
认识视口单位vm、vh在网页中的排版应用
qq_38163146的博客
09-15 531
视口单位是什么？ 在 CSS 规范中，有4种类型的可用视口单位：· vw --- 1vw 等于视口宽度的 1% vh --- 1vh 等于视口高度的 1% vmin --- vw 和 vh 中的较小值 vmax --- vw 和 vh 中的较大值视口，即浏览器屏幕大小，1vw 等于浏览器宽度的 1%，100vw 即整个浏览器的宽度。 视口的单位大小会根据视口大小的改变自动计算，视口大小的改变常...
html文件怎么生产vm页面,认识视口单位vm、vh在网页中的排版应用
weixin_42513512的博客
06-03 626
在之前的两篇关于构建模块化的文章中，谈到了 rem & em 和 响应式排版，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。视口单位是什么？在 CSS 规范中，...
h5中使用rem、vm和vh、@media实现屏幕适配
huangwensu的博客
09-24 1858
1.使用postcss-pxtorem包实现自适应 通过npm install postcss-pxtorem安装包，在postcss.config.js中添加配置 postcss: { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } }, 页面中可以直接使用px单位，会自动编译为rem..
vm vh移动端布局及 bilibili官网移动端首页布局
薛定谔的猫
12-22 1088
市场上的移动端大多数为flex布局，此时我们用到了rem这个单位，但是rem需要媒体查询，要根据页面是尺寸进行修改，而vm/vh省去各种判断和修改，像B站就通过vue和vm写的。为什么现在还是px，和人用的多，这是因为vm/vh的兼容性比较差，主要用于移动端开发。我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所有开发中使用vw就好啦(等比例缩放)。当前屏幕视口是375px，则1vm就是3.75px,如果当前视口为414，则1vh就是4.14px。超级简单，元素单位之间使用新单位vw/vh即可。
vw，vh，vm 的使用
weixin_30951743的博客
06-07 651
vw是相对屏幕宽度的百分比，vh是相对屏幕高度的百分比，还有vmin和vmax就是以宽或者高中小的或者大的为基准的百分比，现在的项目中用的都是vw，因为高度是根据内容的多少而不固定的。 转载于:https://www.cnblogs.com/lijianjian/p/9153328.html...
CSS单位之vw、vh、vmin、vmax、%
时光清浅处，一步一安然
02-14 3726
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
ybh756784818的博客
04-08 3534
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
视区相关单位vw, vh..简介以及可实际应用场景
weixin_30698297的博客
02-05 315
一、N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了，参见：CSS长度值及时间、频率、角度单位。显然，其中就提到了本文要感叹的单位vw, vh，见下图： 不过“我看见你”和“我触碰你”是不一样的。正好，机缘巧合，最近又与这两个单位想见。大致琢磨了下，貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。想到这里，自己不由得小兴奋了下，于是决定抽时间研究研究（虽然最...
css中相关单位（px,%,em,rem,vw,vh,vm）的区别
weixin_42574100的博客
05-22 1611
随着web时代发展和html5的出现，前端对网页的要求越来越高了，网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的结果，会有不同的表现和效果。 现在大部分的项目需求都是需要响应式设计，需要去适配各种设备，比如：电脑，手机，平板。如果单位不合适，那么有可能在这个设备布局效果是正常的，另一设备布局效果错乱，就会得不到很好的适配，所以我们需要选择合适的单位来适配各种设备。 接下来简单的介...
CSS3新vw, vh单位
服务好姐qa
12-17 2万+
From: http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/ CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面 CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面 /* 既然vw, vh是视区相
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
热门推荐
Jin's blog
01-11 12万+
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
面试基本内容
最新发布
weixin_64742764的博客
08-28 1066
加载（将字节码文件加载到运行时数据区的方法区中）——>链接（验证:检查字节码文件是否合法—>准备:静态类变量赋值为默认值，不会实例变量分配初始化—>解析:将常量池引用，转化为直接引用）——>初始化。
css中怎么实现vm减vh
07-13
需要注意的是，`vm` 和 `vh` 单位都是相对于视口大小的单位。`vm` 表示视口宽度的百分之一，而 `vh` 表示视口高度的百分之一。在大多数情况下，视口的宽度和高度是相等的，所以减去 `100vh` 可以实现 `vm` 减去 `vh`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值