精华内容
下载资源
问答
  • px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。 2、em 参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。 字体大小同样都是1.5em,但是效果却截然...
  • CSS 的vh、vw单位

    千次阅读 2019-09-30 09:36:54
    vmin:当前 vw 和 vh 较小的一个值 vmax:当前 vw 和 vh 较大的一个值 vw、vh与 % 的区别: % 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。 vw、vh 优势在于能够直接获取高度,而用 % ...
    • vw: 视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
    • vh: 视窗高度的百分比( 1vh 代表视窗的高度为 1%)
    • vmin:当前 vw 和 vh 中较小的一个值
    • vmax:当前 vw 和 vh 中较大的一个值

    vw、vh与 % 的区别

    1. % 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
    2. vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
    展开全文
  • css中vw

    2021-02-08 15:27:27
    css中vw什么单位? 在css中vw是一个长度单位,一个视口单位,是指相对于视口的宽度;视口会被均分为100单位vw,则1vw等于视口宽度的1%,比如浏览器的宽度为1920px,则“1vw=1920px/100=19.2px”。 视口单位...

    css中的vw是什么单位?

    在css中,vw是一个长度单位,一个视口单位,是指相对于视口的宽度;视口会被均分为100单位的vw,则1vw等于视口宽度的1%,比如浏览器的宽度为1920px,则“1vw=1920px/100=19.2px”。
    视口单位(Viewport units)
    在PC端,视口指的是在PC端,指的是浏览器的可视区域;
    而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。
    视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

    根据CSS3规范,视口单位主要包括以下4个:

    1.vw:相对于视口的宽度, 视口被均分为 100 单位的vw,1vw等于视口宽度的1%。

    2.vh:相对于视口的宽度, 视口被均分为 100 单位的vh,1vh等于视口高度的1%。

    3.vmin:选取vw和vh中最小的那个。

    4.vmax:选取vw和vh中最大的那个。
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 本文介绍了css3新单位vw、vh、vmin、vmax的使用详解,分享给大家,具体如下: 1,vw、vh、vmin、vmax 的含义 (1)vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由...
  • 主要介绍了css3新单位vw、vh的使用教程,本文通过实例代码给大家介绍vw、vh、vmin、vmax 的含义及vw、vh与%百分比的区别,感兴趣的朋友一起看看吧
  • 为了移动端适配,我们可以使用postcss-px-to-viewport插件来进行px-vw单位转换。GitHub 第一步:安装插件 npm i postcss-px-to-viewport --save-dev 第二步:在一级目录新建**postcss.config.js**,然后在...

    为了移动端适配,我们可以使用postcss-px-to-viewport插件来进行px-vw的单位转换。GitHub

    第一步:安装插件

    npm i postcss-px-to-viewport --save-dev

    第二步:在一级目录中新建**postcss.config.js**,然后在文件中添加以下代码

    module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
          viewportWidth: 375,//视窗的宽度,对应的是我们设计稿的宽度
          viewportHeight: 667,//视窗的高度,对应的是我们设计稿的高度
          unitPrecision: 5,//指定'px'转换为视窗单位值得小数位数(很多时候无法整除)
          viewportUnit: 'vw',//指定需要转换成的视窗单位,这里使用vw
          selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],//指定不需要转换的类(样式的类名)
          minPixelValue: 1,//小于或等于‘1px’不转换为视窗单位
          mediaQuery: false,//允许在媒体查询中转换'px'
          exclude: [/TabBar/, /CartBottomBar/],//不进行单位转换的文件(数组中内容为正则表达式)
          landscape: false,  // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: "vw", // 横屏时使用的视窗单位
          landscapeWidth: 1134 // 横屏时使用的视窗宽度
        },
      }
    }
    // exclude中存放的元素必须是正则表达式

     

     

     

     

     

     

    展开全文
  • 主要介绍了css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况的相关资料,需要的朋友可以参考下
  • 像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点。 早年的pc端展示的页面基本都用这个单位。...REM的“R”

    像素(px)&百分比(%)

    像素(Pixel)

    1. 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点。
    2. 早年的pc端展示的页面基本都用这个单位。

    百分比(%)

    相对长度单位,指占用的父元素宽度/高度的比例。

    1. 当指定为100%时,会占据父元素的全部宽度或高度;
    2. 也可以指定大于100%的数值,这时,子元素会超出父元素的边界。

    EM&REM

    这两个都是相对长度单位。区别在于:

    1. EM是相对于父元素
    2. REM是相对于根元素。REM中的“R”就是ROOT的意思。页面中的根元素是指html标签。

    现代浏览器通常默认字体大小是16px,所以rem/em的数值实际上都是16px的倍数。例如,当字体大小为16px时,有:

    remem
    1rem, 1x16=16px1em, 1x16=16px
    2rem, 2x16=32px2em, 2x16=32px
    0.75rem, 0.75x16=12px0.75em, 0.75x16=12px
    0.625rem, 0.625x16=10px0.625em, 0.625x16=10px

    问题在于,当使用16px做为默认大小时,12px或10px这种数值使用rem/em来表示,会在计算和书写时比较麻烦。所以通常会在css的html选择器中将字体大小进行重置。

    html{
        font-size: 62.5%;
    }
    

    也就是说现在默认字体大小不再是16px,而是16px*0.625=10px。这时,在使用rem/em时,就方便多了。此时的12px就是1.2rem, 10px就是1rem,计算和书写更加方便。

    remem
    1rem, 1x10=10px1em, 1x10=10px
    2rem, 2x10=20px2em, 2x10=20px
    1.2rem, 1.2x10=12px1.2em, 1.2x10=12px

    这里需要注意一点,虽然在html选择器和其他选择器中都定义了font-size属性,但是要注意区别

    html {
        # 这里是重新设置根字体大小,其含义是16px*62.5%=10px,也就是说将根字体大小设置为10px;
        font-size: 62.5%;
    }
    .parent {
        # 这里是应用根设置的字体大小,20rem = 10px*20 = 200px
        width: 20rem;
        height: 20rem;
        # 指定字体大小是20px
        font-size: 2rem;
    }
    

    EM的缺点

    前面提到,EM是相对于父元素进行计算,所以当页面比较复杂时,计算EM,也就会变的复杂。

    究其原因,是因为其所有字体大小都相对于父元素的大小决定的,当页面有多层嵌套时,同样是定义2rem/2em,实际显示的字体大小会不同。

    根元素一级子元素二级子元素三级子元素
    10px2em(20px)2em(40px)2em(80px)
    10px2rem(20px)2rem(20px)2rem(20px)
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          html {
            font-size: 62.5%;
          }
          .parent {
            width: 600px;
            height: 600px;
            background-color: lightblue;
          }
          .item_em_1,
          .item_em_2 {
            font-size: 2em;
            background-color: limegreen;
          }
          .item_rem_1,
          .item_rem_2 {
            font-size: 2rem;
            background-color: purple;
          }
        </style>
      </head>
      <body>
        <div class="parent">
          <div class="item_em_1">
            EM_AA(这里EM与REM自动大小相同)
            <div class="item_em_2">EM_BB(这里字体相对父元素明显变大)</div>
          </div>
    
          <div class="item_rem_1">
            REM_AA
            <div class="item_rem_2">REM_BB(这里字体与父元素相同)</div>
          </div>
        </div>
      </body>
    </html>
    

    所以在前端开发时,尽量不要使用EM!容易迷糊!

    VW&VH

    这两个单位都是相对于页面显示窗口的大小。

    1. VW:视图宽度(Viewport Width),将页面显示窗口的宽度分成100份,每1vw是视图窗口宽度的1/100。
    2. VH:视图高度(Viewport Height),将页面显示窗口的高度分成100份,每1vh是视图窗口高度的1/100。
    可视区域1vw100vw1vh100vh
    375x6673.75px375px6.67px667px
    414x7364.14px414px7.36px736px

    vmax&vmin

    1. vmax:取当前vw,vh中的最大值
    2. vmin:取当前vw,vh中的最小值
    可视区域1vmax1vmin
    1920x10801920px/100 = 19.2px1080px/100 = 10.8px
    720x680720px/100 = 7.2px680px/100 = 6.8px

    貌似用的不太多

    计算

    可在CSS中使用calc进行数值的计算

    计算时,要注意±符号前后必须要有空格

    calc(100vh - 10px)
    calc(100vh - 10rem)
    
    展开全文
  • CSS中vw,vh单位什么vw:浏览器可见视口【宽度】的百分比(1vw代表视窗【宽度】的1%) vh:浏览器可见视口【高度】的百分比(1vw代表视窗【高度】的1%) vmin:当前 vw 和 vh 较小的一个值。 vmax:当前 vw ...
  • 视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。笔者简单理解为:浏览器内部的可以看到区域大小。 2、vw、vh、vmin、vmax 单位 说明 vw 1vw = 视口宽度...
  • vw单位 vw是相对于视窗宽度的单位, 1vw=1/100浏览器宽度。 vh单位 vh是相对于视窗高度的单位, 1vh=1/100浏览器高度。 vw vh的用途 vw vh相对于浏览器的窗口的大小,代码如下: .div1{ width:...
  • 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器...视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。 视口单位 根据CSS3规范,视口单位主要包括以下4个...
  • 一、前言: 响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,...
  • css中rem em vw vh px各自代表的含义 rem rem是css3新增的一个相对单位,rem是相对于HTML根元素的字体大小来进行计算的,如果没有设置HTML字体大小,就会以浏览器默认字体大小,一般为16px rem除了IE8及更早版本以外...
  • 默认将 vw 作为优先单位使用,以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem,这款插件很好的解决了该问题。 安装 $ npm i @moohng/postcss-px2vw -D 使用 // .postcssrc.js module.exports = { ...
  • 我们先简单了解一下什么是vw和rem以及它们的作用,vwcss3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般...
  • CSS中vh和vw单位设置宽高

    千次阅读 2016-04-06 16:35:40
    响应式布局离不开百分比,但是,CSS百分比并不是所有问题的最佳解决方案,CSS的宽度是相对于包含它的父元素的宽度的,如果你想用视口的宽度或者高度,而不是父元素的,便可以使用vh和vw单位来设置宽高 1vh等于1/100...
  • css vw单位As page layouts become more complex, developers require access to a greater range of measurements to bring their designs to life. Beyond the standard percentage widths, r/ems and pixels we’...
  • 先看单位为%百分号的时候 .box{ float: left; } .a{ overflow: hidden; width: calc(100% - 100px); height:500px; } <div class="box" style="width: 100px; height:100px; background-color:red;">...
  • 的插件,从像素单位生成视口单位vw,vh,vmin,vmax)。 演示版 如果您的项目涉及固定宽度,则此脚本将有助于将像素转换为视口单位。 输入 . class { margin : -10 px .5 vh ; padding : 5 vmin 9.5 px 1 px ; ...
  • 安装完成后,在项目新建文件postcss.config.js 并添加以下配置代码 module.exports = { plugins: { autoprefixer: {}, 'postcss-px-to-viewport': { viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的...
  • vw和vw单位

    万次阅读 2020-02-29 22:15:35
    那么它们之间有什么关系,vw和vw单位究竟是什么呢? rem布局是移动端布局的非常常见的一种方案,很多大网站也都采用了这种方案,它的好处就是这种布局方式做出的页面可以很好的适配各种型号的手机设备,在不同的...
  • CSSvw移动端适配

    2019-12-29 18:02:21
    视口单位CSS3新引入的概念,其中的视口是指PC端浏览器的可视区域和移动端的布局视口。视口单位如下所示。 (1) vw 相对于视口的宽度, 视口宽度是100vw, 1vw = 视口宽度的1% (2) vh 相对于视口...
  • CSSvw和vh

    2019-12-17 17:14:42
    相对于视口的宽度,视口被均分为100单位vw h1 { font-size: 8vw; } 如果视口的宽度是200mm,那么上述代码h1元素的字号将为16mm,即(8x200)/100 vh 说明: 相对于视口的高度。视口被均分为100单位的vh ...
  • 视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。 根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%。 2.vh:1vh等于视口高度的1
  • 什么我们需要相对长度rem em等? 固定长度已经不能满足我们现在的需求了。 举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好...
  • 命令行输入:npm install postcss-px-to-viewport --save-dev 安装成功 安装完成后会自动生成一个配置文件 postcss.config.js 写入相关配置 module.exports = { plugins: { autoprefixer: {}, "postcss-px-...
  • css中相对长度单位Measuring things is as important an aspect of web design, as any other. The fact that we have at least 10 different measurement units in CSS speaks for itself. 衡量事物与Web设计一样...
  • 当页面所有元素都使用rem单位时,你只需要增加一小段js代码,通过监听设备尺寸来改变根元素的font-size值,那么所有元素就会按比例放大或者缩小,以此达到一套布局适应多种移动设备的目的。但这种方案有弊端(弊端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,829
精华内容 2,731
关键字:

css中vw是什么单位