返回目录

px,em,rem,%,vw,vh,vm

一、像素

* 设备像素(物理像素)* 真实存在,设备出厂后就固定了* 单位:pt(像素点)* 分辨率:* iPhone6 750pt*1334pt
* CSS像素(设备独立像素、逻辑像素)* 不是真实存在的,是一个相对单位,是相对于设备来说的。* 一个CSS像素对应一个物理像素,放到两倍后一个CSS像素对应两个物理像素* 单位:px(W3C规定px不是大小,是视角)

二、px

* px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

三、em

* 作为font-size的单位时,其代表父元素的字体大小
* 作为其它属性单位时,代表自身字体大小
//作为font-size的单位
body {font-size: 16px;
}body>#box {font-size: 2em;//em代表父元素字体大小,2em = 32px;
}
//作为其它属性单位
body>#box {font-size: 20px;width: 10em;//em代表自身字体大小,10em = 200px;
}

四、rem

* CSS3新增的一个相对单位(相对于根元素<html></html>)
* 作用于非根元素时,是相对于根元素字体的大小
* 作用于根元素字体大小时,是相对于其初始字体的大小
//作用于非根元素
html {font-size: 50px;
}
body {font-size: 1rem;//此处的rem是相对于根元素的,1rem = 50px;//如果一个元素的宽度为500px;//可以表示为width: 10rem;
}
//作用于根元素字体大小
html {font-size: 1rem;//浏览器默认字体是16px,1rem = 16px;
}

五、%

* 一般宽泛的讲是相对于父元素,但是并不是十分准确。* 1、对于普通定位元素就是我们理解的父元素* 2、对于position: absolute;的元素是相对于已定位的父元素* 3、对于position: fixed;的元素是相对于ViewPort(可视窗口)

六、vw

* css3新单位,Viewport's Width的简写,1vw等于视口宽度的1%

七、vh

* css3新单位,Viewport's height的简写,1vh等于视口高度的1%

八、vm

* css3新单位,相对于视口的宽度或高度中较小的那个,其中最小的那个被均分为100单位的vm
* 比如:浏览器高度900px,宽度1200px,取最小的浏览器高度,1vm = 900px / 100 = 9px* 还有:* vmin,取vw和vh中最小的值* vmax,取vw和vh中最大的值

九、vh、vw和%

* vh、vw是不包含页面滚动条的视窗宽度(innerwidth),%包含了滚动条的宽度在里面了(outerwidth)。
* %问题:* 百分比的值不好计算* 需要确定父级大小* 宽度可以设置,但是高度不好设置

十、css还有哪些长度单位?

* in: 寸
* cm: 厘米
* mm: 毫米
* t: point,大约1/72寸
* pc: pica,大约6pt,1/6寸
* 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

参考:链接

前端学习笔记 - px,em,rem,%,vw,vh,vm相关推荐

  1. css px em rem % vw vh vm 区别

    前言 在传统项目开发中,我们只会用到 px.%.em 这几个单位长度,它们可以适用大部分项目的开发,并且拥有较好的兼容性. 而从 css3 开始,浏览器对逻辑单位的支持又提升了新的境界,增加了 rem ...

  2. CSS中的常见单位(px,%,em,rem,vw,vh,vmax,vmin,calc)

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

  3. 【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx

    基本单位 单位 计算方式 简介 px 标准像素 优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...

  4. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  5. web开发之长度单位:px, pt, rem, vw, vh

    在前端开发中,常常会碰到各种长度单位,比如 px, em, rem, vw 等. 总的来说,可以把这些长度单位分成两类:绝对长度单位 和 相对长度单位. 绝对长度单位 绝对长度单位是一个固定的值,一个 ...

  6. html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)

    px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...

  7. px,em,rem,vw单位在网页和移动端的应用

    px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...

  8. html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)

    在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...

  9. px,em,rem,vh,vw,vmin,vmax的区别

    css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...

最新文章

  1. django1.4日志模块配置及使用
  2. Reinhold就Jigsaw投票一事向JCP提交公开信
  3. linux netstat 查看网络信息 实例 状态说明
  4. #中调用委托的简单方法
  5. 封装时间转换工具类_利用swig封装C++的dll为C#方便使用
  6. 图灵社区 和 大家网
  7. 对话框 函数_通过函数式编程实现动态对话框处理程序
  8. Power BI Desktop报告中的Web URL配置
  9. 双击背面截图_如何通过点击iPhone背面快速截图,只需一个简单设置
  10. Spring源码分析笔记--AOP
  11. 水仙花数(python)
  12. 设为首页加入收藏代码_兼容各浏览器ie系列Firefox
  13. 双系统——彻底删除ubuntu
  14. phpMyAdmin 登陆超时(1440秒未活动),请重新登录问题
  15. Matlab批量画图并写入word
  16. C3P0,alibaba连接池错误【已解决】-An exception occurred while acquiring a poolable resource. Will retry.
  17. ExtJS控件主要功能用法
  18. java 点名器_java随机点名器 课程设计.docx
  19. 东西归置20210815
  20. 普通话测试第四题评分标准_普通话等级考试《评分细则》.docx

热门文章

  1. CentOS升级PHP到8.0
  2. git恢复commit过的代码
  3. 手机屏幕 and 分辨率
  4. 栈(Stack)和队列(Queue)区别
  5. 【解决】萤石云接入视频报错视频编码类型非H264
  6. R语言:用R语言填补缺失的数据
  7. 计算机硬件培训ttp,通信新技术优秀教学平台(TTP).doc
  8. React上拉加载(React-PullLoad)
  9. Python wheel文件
  10. 服务器遇到大流量攻击的处理过程