css的度量单位

  • px，像素数量，适用于比较固定的场景，比如边框宽度，分割线宽度

  • em

    em：是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；它相对的是父元素的字体大小，如果父元素是根的1.5，当前元素是父元素1.5，则当前元素字体大小是16 * 1.5 *1.5 = 36px

    <!DOCTYPE html>
    
<html>
    
<head>
    
<meta charset="utf-8">
    
<title>文档标题</title>
    
  <style>
    
    .outer{
    
      font-size:1.5em;
    
    }
    
    .inner{
    
      font-size:1.5em;
    
    }
    
  </style>
    
</head>
    
<body>
    
  <span>这是body根的内容</span>
    
	<div class="outer">
    
      <span>这是外层内容</span>
    
      <div class="inner">
    
      <span>这是内层内容</span>
    
      </div>
    
  </div>
    
</body>
    
</html>

  • rem

    em 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

    <!DOCTYPE html>
    
<html>
    
<head>
    
<meta charset="utf-8">
    
<title>文档标题</title>
    
  <style>
    
    .outer{
    
      font-size:1.5em;
    
    }
    
    .middle{
    
      font-size:1.5em;
    
    }
    
    .inner{
    
      font-size:1.5rem;
    
    }
    
  </style>
    
</head>
    
<body>
    
  <span>这是body根的内容</span>
    
	<div class="outer">
    
      <span>这是外层内容 1.5em</span>
    
      <div class="middle">
    
      		<span>这是中层内容 1.5em</span>
    
          <div class="inner">
    
                <span>这是内层内容 1.5rem</span>
    
          </div>
    
      </div>
    
  </div>
    
</body>
    
</html>

  • vh/vw

    这个似乎是相对于viewport的东西，这个viewport应该是

    这里的viewport

    1vh相当于1%的viewport高度，1vw相当于1%的viewport宽度

  • %(百分比)

    % 是相对于父元素的

    <!DOCTYPE html>
    
<html>
    
<head>
    
<meta charset="utf-8">
    
<title>文档标题</title>
    
  <style>
    
    .outer{
    
      display: flex;
    
      justify-content: center;
    
      align-items: center;

      width: 500px;
    
      height: 330px;
    
      background-color: #F1A0E1;
    
    }
    
    .inner{
    
      width: 80%;
    
      height: 80%;
    
      background-color: #77A0E1
    
    }
    
  </style>
    
</head>
    
<body>
    
  <div class="outer">
    
    <div class="inner" />
    
  </div>
    
</body>
    
</html>

  • vmin

    vw和vh中较小的那个。

  • vmax

    vw和vh中较大的那个。

建议

  1. 如果是div长宽尽可能使用百分比，em，或者rem，方便适配，而且不同放缩比例下，页面尽可能不乱
  2. 如果是border或者其他的样式使用px

    最终还是 根据实际需要来处理

css的度量单位：px、em、rem、vh、vw、vmin、vmax、百分比的更多相关文章

  1. css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...

  2. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  3. CSS3中的px,em,rem,vh,vw辨析

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...

  4. CSS3中的px,em,rem,vh,vw

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...

  5. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  6. 关于CSS单位:rem vh vw vmin vmax

    rem(root em) 如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size demo: body {  font-size: ...

  7. rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设 ...

  8. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  9. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  10. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

随机推荐

  1. 前端17号学习（html完结）

    一.路径 1.目录文件夹和跟目录 实际工作中需要创建一个文件夹来管理他们. 目录文件夹,就是普通文件夹,里面存放页面相关素材,如html文件.图片等. 根目录,打开目录文件夹的第一层就是根目录. 2. ...

  2. 前端好用API之scrollIntoView

    前情 在前端开发需求中,经常需要用到锚点功能,以往都是获取元素在滚动容器中的位置再设置scrollTop来实现的. scrollIntoView介绍 scrollIntoView()方法将调用它的元素 ...

  3. Python绘制七段数码管字母：从理论到实践

    在现代电子显示技术中,七段数码管是一种广泛应用的显示器件,常用于显示数字.字母和一些特殊符号.其基本原理是通过控制七个发光段(a, b, c, d, e, f, g)的亮灭来形成不同的显示内容.本文将 ...

  4. 【C#】【平时作业】习题-4-流程控制

    T1 创建一个Windows应用程序,先输入年龄值,再判断是否大于18,最后显示判断结果,运行效果如图所示. 提示: 注意保持逻辑完整: 引用数据需要明确出处. [程序代码] private void ...

  5. Qt音视频开发37-USB摄像头解码ffmpeg方案

    一.前言 用ffmpeg来处理USB摄像头,是前段时间研究视频监控ffmpeg内核的时候搞定的,既然ffmpeg这么牛逼的库可以解析各种音视频,我想处理个本地USB摄像头应该也不是什么难事,果真搜索也 ...

  6. Qt编写的项目作品28-视频监控显示安卓版

    一.功能特点 1.1 基础功能 支持各种音频视频文件格式,比如mp3.wav.mp4.asf.rm.rmvb.mkv等. 支持各种视频流格式,比如rtp.rtsp.rtmp.http等. 本地音视频文 ...

  7. 使用百度地图API服务中的问题汇总

    1.服务器端与浏览器端的AK的区别 服务端就是指数据操作需要在百度地图服务器上进行接口数据交互,不能在前端代码中直接调用,跨域不支持,开发多一个后端: 浏览器端就是指数据操作需要在Web前端就可以完成 ...

  8. 跟着源码学IM(八)：万字长文，手把手教你用Netty打造IM聊天

    本文作者芋艿,原题"使用 Netty 实现 IM 聊天贼简单",本底价有修订和改动. 一.本文引言 上篇<跟着源码学IM(七):手把手教你用WebSocket打造Web端IM ...

  9. 长连接网关技术专题(六)：石墨文档单机50万WebSocket长连接架构实践

    本文由石墨文档技术杜旻翔分享,原题"石墨文档 Websocket 百万长连接技术实践",有修订. 1.引言 在石墨文档的部分业务中,例如文档分享.评论.幻灯片演示和文档表格跟随等场 ...

  10. vivo手机上的系统级消息推送平台的架构设计实践

    本文由vivo互联网服务器团队李青鑫分享,有较多修订和改动. 1.引言 本文内容来自vivo互联网服务器团队李青鑫在"2021 vivo开发者大会"现场的演讲内容整理而成(现场演讲 ...