文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

css新单位vw,vh在响应式设计中的应用

考虑到未来响应式设计的开发，如果你需要，浏览器的高度也可以基于百分比值调整。...但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式，比如字体大小不会随着你窗口改变而改变，如今css3引入的新单位明确解决这一问题。...View Demo css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小...: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */ } .demo4 { width: 10vw; height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50%...*/ } 大家可以把demo窗口收缩来查看不同大小时候的变化。

1.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    网站自适应布局为什么我要抛弃rem，改用vw？

    你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。...简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。...  我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight  在移动端我们一般都可以认为，100vw就是屏幕宽度。...若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function...如果你的页面只适用于微信、qq，那绝对能放心使用vw单位，还可以配合vh针对一些特殊比例屏幕做处理，彻底摆脱使用rem带来的副作用，删掉html头部计算font-size的那段js代码，让你的代码更纯粹

    4.3K10

    font-size用VW来写的方法

    转变后，我们的代码就变成这样： CSS *{ margin: 0; padding: 0; border: none; font-size: 1.5625vw; } 1，vw、vh、vmin、vmax...（2）具体描述如下： ​vw​：视窗宽度的百分比（​1vw ​代表视窗的宽度为 ​1%​） ​vh​：视窗高度的百分比 ​vmin​：当前 ​vw​ 和 vh 中较小的一个值 ​vmax​：当前 ​vw​...和 ​vh​ 中较大的一个值 2，vw、vh 与 % 百分比的区别 （1）​%​ 是相对于父元素的大小设定的比率，​vw​、​vh ​是视窗大小决定的。...3，vmin、vmax 用处 做移动页面开发时，如果使用 ​vw​、​wh ​设置字体大小（比如 ​5vw​），在竖屏和横屏状态下显示的字体大小是不一样的。...由于 ​vmin ​和 ​vmax ​是当前较小的 ​vw ​和 ​vh ​和当前较大的 ​vw ​和 ​vh​。这里就可以用到 ​vmin ​和 ​vmax​。使得文字大小在横竖屏下保持一致。

    33010

    01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

    本节案例如下（其他动效篇幅原因逐步讲解）： 一、线性渐变 1.1 渐变分类 在 CSS 中，使用渐变色需要用到 gradient 属性，而 gradient 属性分为 线性渐变 linear-gradient...1.6 渐变线（重点） 渐变线在渐变中是指渐变颜色停止的线，渐变线可以指定位置，并且可以通过渐变线使渐变色居于某一个范围之内，渐变线的使用一定是要在 2 种渐变色以上。...3.2 渐变色移动背景 在一般的网站中，有时我们可以看到一些渐变色背景并且移动的示例，那么如何使渐变色进行移动呢？...此时我们可以直接设置当前背景图为渐变色，为了更好演示，直接设置当前类样式在 body 中调用： 此时我们可以看到，设置了一个渐变色，使用了 closest-side ，在大小设置为 130vw 130vh（vw和vh是视窗大小），background-position

    9.8K10

    python抛出异常和捕获异常_在try块中可以抛出异常吗

    抛出异常原因 主动捕获异常 可以增加健壮性 抛出异常的种类 AssertionError ，断言失败抛出异常； AttributeError ，找不到属性抛出异常； ValueError ， 参数值不正确...ArithmeticError 算术错误的基类 ZeroDivisionError 算数错误的子类，除法或模运算的第二个参数是零 BufferError 缓冲区错误 注意 如果不确定需要打印异常种类 只是单纯不想让程序暂停 可以使用基类...Exception 但是 Python中不推荐使用这种方法 抛出异常的格式 1.基本语法 try: num = int(input("请输入一个数字:")) print(num) except...解释器从上向下执行 当运行try中的某行代码出错,会直接进入except中执行下方代码 try中错行下方的代码不会被运行 except…as… 是固定的语法格式 打印traceback信息 finally...后的代码不管是否抛出异常都会执行 except 的原理 调用sys中 exc.info 方法返回基本信息 所以抛出异常的第一步拓展可以在这里开始 注意 每个关键字下方的代码都是独立的(所有的变量都是局部变量

    7.7K60

    vh 存在问题？试试动态视口单位之 dvh、svh、lvh

    大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。...中较小的值 vmax — vw 和 vh 中较大的值 vh 在移动端存在重大问题！...根因在于： 很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相关控件的高度计算在内2 同时，很多时候，由于会弹出软键盘等操作，在弹出的过程中，100vh 的计算值并不会实时发生变化！...看看 CanIUse： 因此，在不久的将来，全面使用 dvh 替代 vh，能有效的减少非常多因为 vh 在移动端的表现而引起的问题。...CSS 的更新迭代一直在快速持续，很多内容还是有必要不断了解学习，在不久的将来就能很快应用在业务中。

    2.8K20

    高阶 CSS 技巧在复杂动效中的应用

    技巧 1：可以利用径向渐变，在一个矩形 DIV 元素中，通过径向渐变从实色到透明色的变化，实现一个半圆。...换个配色重新实现一遍吗？当然不是，这里我们利用 CSS 提供的倒影功能，可以快速完成这个操作。...首先，我们需要实现这样一种网格效果： 还记得上面的技巧 3 吗？当你碰到大量重复有规律的线条，或者方块图形，你第一时间就应该想到在一个 DOM 中利用渐变而不是多个 DOM 去实现。...这个使用纯 CSS 是比较难实现的，当然，好在这里我们可以运用上之前给大家多次提及过的 SVG 滤镜。 利用 feTurbulence 可以有效实现一些波形纹理效果。...文中所有技巧在我过往的文章中都有非常高频的出现次数，对其中细节不了解的可以在 iCSS 中通过关键字查找，好好补一补。

    2.1K10

    春眠不觉晓，vh、vw、vmin、vmax 知多少

    介绍一些 CSS3 新增的单位，平时可能用的比较少，但是由于单位的特性，在一些特殊场合会有妙用。...这就是 vh 和 vw 单位为我们提供的。 1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。...同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px。 可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。...vmin and vmax vh和 vw 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值 vmin — vmin的值是当前vw和vh中较小的值。...vmax — vw和vh中较大的值。 这个单位在横竖屏的切换中，十分有用。 在一些 Demo 示例，或者大页面中，我们经常都会看到上述 4 个单位的身影。灵活使用，就可以减少很多 CSS 的代码量。

    1.6K20

    布局常用解决方案对比(媒体查询、百分比、rem和vwvh）

    px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。...在pc端，通常认为css中,1px所表示的真实长度是固定的。 那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？...也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。 五. 通过vw/vh来实现自适应 1. 什么是vw/vh ?...css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...各个单位具体的含义如下： 单位含义vw相对于视窗的宽度，视窗宽度是100vwvh相对于视窗的高度，视窗高度是100vhvminvw和vh中的较小值vmaxvw和vh中的较大值 这里我们发现视窗宽高都是100vw

    2.8K40

    探讨移动端适配

    答案是否定的，我们在css中只给盒子规定了100x100的像素，而在浏览器放大两倍后盒子变成了200x200 从这里也验证了css中的像素只是一个相对单位，浏览器在对html解析时会将css像素转换为物理像素在进行呈现...通过查看视口的大小就可以得出 CSS像素与物理像素的比值关系 如上图视口宽度为 1280 而我们的分辨率，物理像素也是 1280 此时在浏览器窗口未发生改变和缩放时，CSS像素与物理像素的比值是...以Iphone6为例 他的高宽为 750x1334 也就意味着横向只能展示 750个像素点，如果此时有一个900px的盒子，在Iphone6中会正常显示吗 借助调试工具查看 .box1{...移动端布局适配解决方案 rem+flexible rem+css预处理+媒体查询与rem+flexible.js做网页适配 vw，vh 1.vw：1vw等于视口宽度的1% 2.vh：1vh等于视口高度的...1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为 375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度 开发者拿到设计稿

    2.2K10

    vw, vh视窗宽高单位的使用

    不过“我看见你”和“我触碰你”是不一样的。正好，机缘巧合，最近又与这两个单位想见。大致琢磨了下，貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。...如果跟其他CSS3的属性配合使用呢？...注：demo页面使用的弹框脚本就是之前“seajs使用示例及spm合并压缩工具”一文中展示的最终脚本。...您可以狠狠地点击这里：vw, vh视区完全覆盖与纯CSS弹框 ? ?...OK，看上面demo标题可以发现，本demo最重要的知识点其实并不在于vw, vh这两个单位的介绍；而是展示了如果使用纯CSS实现弹框的水平与垂直居中效果（IE6也是可以支持的，不过写法需要变变~以后有机会详细介绍

    2.9K10

    移动端布局方案

    在CSS代码中需要使用百分比来设置盒子的宽高。 例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...开发计算量小，参照系单一 rem 适配布局缺点 不是纯 CSS 移动适配方案，需要引入js脚本，在头部内嵌一段 js脚本，监听分辨率的变化来动态改变根元素的字体大小，css样式和 js 代码有一定 耦合性...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个...,vh 也可以，甚至使用 rem 也行） 对于上述的各种移动端web页面自适应方案来说，都存在着一些优势和不足 国内的一些互联网站，通过查看网页源代码发现，它可能不是某一种方案的单独使用，而是几种方案的结合

    1.5K10

    前端架构师之路02_移动端布局方案

    在CSS代码中需要使用百分比来设置盒子的宽高。 例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...开发计算量小，参照系单一 rem 适配布局缺点 不是纯 CSS 移动适配方案，需要引入js脚本，在头部内嵌一段 js脚本，监听分辨率的变化来动态改变根元素的字体大小，css样式和 js 代码有一定 耦合性...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 计算方式实际上与百分基本一致...,vh 也可以，甚至使用 rem 也行） 对于上述的各种移动端web页面自适应方案来说，都存在着一些优势和不足 国内的一些互联网站，通过查看网页源代码发现，它可能不是某一种方案的单独使用，而是几种方案的结合

    1.2K10

    前端-纯CSS实现波浪效果！

    纯 CSS 实现波浪效果 好，接下来才是本文的重点！使用纯 CSS 的方式，实现波浪的效果。 你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...与 VH，不太了解这两个单位的可以戳这里：vh、vw、vmin、vmax 知多少 可能有部分同学，还存在疑问，OK，那我们把上面的效果缩小 10 倍，将视野之外的动画也补齐，那么其实生成波浪的原理是这样的...因为 中间高，两边低的效果不符合物理学原理，看上去十分别扭； 可以点进去看看下面这个例子： CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图 好，既然掌握了这种方法...一些小技巧 单纯的让一个 border-radius 接近 50 的椭圆形旋转，动画效果可能不是那么好，我们可以适当的添加一些其他变换因素，让动画效果看上去更真实： 在动画过程中，动态的改变 border-radius...的值； 在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形； 上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。

    2.5K30

    纯 CSS 实现波浪效果！

    纯 CSS 实现波浪效果 好，接下来才是本文的重点！使用纯 CSS 的方式，实现波浪的效果。 你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...与 VH，不太了解这两个单位的可以戳这里：vh、vw、vmin、vmax 知多少 可能有部分同学，还存在疑问，OK，那我们把上面的效果缩小 10 倍，将视野之外的动画也补齐，那么其实生成波浪的原理是这样的...因为 中间高，两边低的效果不符合物理学原理，看上去十分别扭； 可以点进去看看下面这个例子： CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图 好，既然掌握了这种方法...一些小技巧 单纯的让一个 border-radius 接近 50 的椭圆形旋转，动画效果可能不是那么好，我们可以适当的添加一些其他变换因素，让动画效果看上去更真实： 在动画过程中，动态的改变 border-radius... 的值； 在动画过程中，利用 transform 对旋转椭圆进行轻微的位移、变形； 上面也演示到了，多个椭圆同时转动，赋予不同时长的动画，并且添加轻微的透明度，让整个效果更佳逼真。

    3.7K40

    前端工程师之移动端布局方案

    在CSS代码中需要使用百分比来设置盒子的宽高。 例如，把盒子的宽度设置成百分比，网页就会根据浏览器的宽度和屏幕的大小来自动调整显示效果。...Rem适配方案使用媒体查询可以根据不同的设备按比例设置页面的字体大小，然后在页面中使用rem单位，可以通过修改html里面的文字大小来改变页面中的元素的大小从而进行整体控制。...开发计算量小，参照系单一 rem 适配布局缺点 不是纯 CSS 移动适配方案，需要引入js脚本，在头部内嵌一段 js脚本，监听分辨率的变化来动态改变根元素的字体大小，css样式和 js 代码有一定 耦合性...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个...,vh 也可以，甚至使用 rem 也行） 对于上述的各种移动端web页面自适应方案来说，都存在着一些优势和不足 国内的一些互联网站，通过查看网页源代码发现，它可能不是某一种方案的单独使用，而是几种方案的结合

    1.4K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券