文档章节

前端里的长度单位

Tangnannan
 Tangnannan
发布于 2017/08/30 23:27
字数 1212
阅读 1
收藏 0
点赞 0
评论 0

       长度单位简介

一、在写css的时候最常用的长度单位是px(像素),经常看到的还有em,pt等等,其实css中的长度单位一共       有8个,分别是px,em,pt,ex,pc,in,mm,cm。

  1、px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。

  譬如,Windows的用户所使用的分辨率一般是96像素/英寸。而Mac的用户所使用的分辨率一般是72像素/英寸。

  2、em:相对长度单位。相对于当前对象内文本的字体尺寸。

  如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

  3、pt:点(Point),绝对长度单位。

  4、ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。

  如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

  5、pc:派卡(Pica),绝对长度单位。相当于我国新四号铅字的尺寸。

  6、in:英寸(Inch),绝对长度单位。

  7、mm:毫米(Millimeter),绝对长度单位。

  8、cm:厘米(Centimeter),绝对长度单位。

  其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc ;

  容器的大小我们经常用px做单位;字体大小(font-size)很多人用px做单位,其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?

px.em.rem区别

PX特点

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

     任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
EM特点 

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意两点:

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10,然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

  也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。


rem特点 

        rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:

p {font-size:14px; font-size:.875rem;}

注意: 

 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

 

在这里为大家提供一个px,em,rem单位转换工具

地址:http://pxtoem.com/

© 著作权归作者所有

共有 人打赏支持
Tangnannan
粉丝 0
博文 4
码字总数 1338
作品 0
杭州
说说css中pt、px、em、rem都扮演了什么角色

前段时间,终于仔仔细细的把pt、px、em、rem了解了一遍,简单整理了一下做个记录。 pt、px、em、rem都是什么 pt单位名称为点(Point),绝对长度单位。现在网页中出现得很少甚至不出现,常用...

郑乔尹在旅游
2017/11/23
0
0
Rem是如何实现自适应布局的?

作为前端工程师的我们,在h5页面布局的过程中会使用rem布局,大家都知道rem是相对长度单位,但是作为前端的我们该如何去让rem布局自适应iphone4、iphone6、iphone6、iphone6plus的呢? 那我们...

小佳怡
01/12
0
0
带你深入了解VIEWPORT和PX

原文出处:tgideas.qq 刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320、640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?——这源...

tgideas.qq
2015/11/13
0
0
html viewport标签说明

先来罗列下学习移动页面重构的过程中可能看到过迷糊过放弃过的一些单位: px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi…… 接下来分类给大家介绍下: ① ...

半张一块
2016/07/25
20
0
Android 布局中长度单位的深入研究

要想使自己的布局在不同设备达到精准空置,理清理顺android布局长度单位之间关系很有必要,否则你也许会经常挠头为什么显示出来的布局不是自己定义的效果呢,有些东西,虽然基础,但是弄个透...

小安是屌丝
2012/12/02
0
0
长度单位PX/EM/PT/EM 区别及其转换公式与对照表

在网页设计css中,经常用到字体,而字体大小的设置单位,常用的有2种:px、pt。这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点;而pt就是point...

晨曦之光
2012/03/09
0
0
HealthKit开发教程之HealthKit的主要类型数据

HealthKit开发快速入门教程之HealthKit的主要类型数据 在HealthKit中,我们将最常用到的数据称之为主要数据。主要数据基本上有三种:长度类型的数据、质量类型的数据、能量类型的数据。本节将...

大学霸
2015/05/04
0
0
安卓中显示单位px和dip以及sp讲解

安卓中显示单位:px和dip以及sp的讲解   Xml代码:   <EditText   android:id="@+id/edittext"   android:layoutwidth="fillparent"   android:layoutheight="wrapcontent"   a......

Candy520
2015/10/21
405
0
FED之必备技能

flex.css快速入门,极速布局 什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚...

掘金官方
2017/12/08
0
0
如何更愉快地使用rem —— 别说你懂CSS相对单位

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对...

Yuying_Wu
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TensorFlow,从一个 Android Demo 开始

TensorFlow Android Demo 项目地址 Machine Learning 既然提到了 TensorFlow,那是不是得神经网络、机器学习了解下? 如果你能坚持把 机器学习速成课程 给啃完了,觉得还挺有兴趣的,那可以考...

孟飞阳
10分钟前
0
0
Confluence 6 安装一个语言组件

Confluence 捆绑了一系列的语言包。这些语言包在 'Language Configuration' 界面中的语言选项中。在 Confluence 的管理员控制台,你可以选择 Choosing a Default Language 和为用户设置(Edi...

honeymose
11分钟前
0
0
JVM学习笔记二:内存结构规范

1、JVM基本结构图 2、java堆(Heap) 3、方法区(Method Area) 4、程序计数器 5、JAVA栈图解 局部变量表:八大基本类型,还可以存储引用类型

刘祖鹏
16分钟前
0
0
mui集成微信H5支付(返回白屏问题已经解决)

一.项目需求 因为公司人员缺少,没有专门开发安卓和ios的人员,为了项目尽早上线采用了混合APP开发的方式,我选择了MUI混合开发框架,项目中需要在用户购买VIP会员的时候进行支付,所以需要在项目...

银装素裹
20分钟前
0
0
TensorFlow gpu 版 安装

win10 + Python3.6 下载cuda https://developer.nvidia.com/cuda-downloads?target_os=Windows&target_arch=x86_64&target_version=81&target_type=exelocal 下载cudnn,复制链接地址,使用迅......

阿豪boy
38分钟前
0
0
SpringBoot集成Redis--配置自定义的RedisCacheManager

配置自定义的RedisCacheManager--1自定义键生成规则 默认的键生成器 当不指定缓存的key时,SpringBoot会使用SimpleKeyGenerator生成key。 SimpleKeyGenerator SimpleKey 查看源码可以发现,它...

karma123
39分钟前
0
0
防火墙未来的发展趋势在哪里?

导读 防火墙(Firewall),也称防护墙,是由Check Point创立者Gil Shwed于1993年发明并引入国际互联网。当下互联网时代,无论是大小企业,大部分都会部署有防火墙的设备,但这些防火墙往往并不...

问题终结者
41分钟前
0
0
MongoDB 副本集 成员节点 RECOVERING 状态处理

这两天遇到好几个MongoDB集群故障,其中一种就是节点长期处于 RECOVERING 状态,并且不能主动追上 primary 节点,需要手动干预。 首先 rs.status()查看实例状态,发现有的节点处于 RECOVERI...

xxj123gogo
47分钟前
0
0
建造者/构造者模式

在建造者模式中, 有如下4个角色: ● Product产品类 通常是实现了模板方法模式, 也就是有模板方法和基本方法, 这个参考第10章的模板方 法模式。 例子中的BenzModel和BMWModel就属于产品类...

kim_o
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部