Actually this artical is from other person's opnion ,i just put it into chinese,and this means a very big progress for me.Because today i am going to start my front-end way in blog,means everyday i will make myself know something new .It will make me happy and far away from lonely.This is a good thing for me .Now let's start with chinese and begin with em vs rem vs px.

在css当中我们应该用什么样的测量单位来构建样式呢？em ，rem 还是px？

我们很多人摒弃了rem而转入px的怀抱，但是忘记了为何之前要首先使用rem.问题不仅仅是在字体大小的设置上面，还有关于它的可访问性。

1，px 是狭隘无知的，不要使用它们。

2，设置尺寸和间距使用rem。

3，媒介查询用em。

Pixels

像素（px）是我们几年来习惯的像素。 每个人都知道一个像素是什么（虽然像素的大小并不总是相同的）。 人人都喜欢使用像素。 他们很容易翻译。 设计师通常以像素为单位，因此可以直接从Photoshop直接进行构建。

所以用像素到底哪里不对了？

Accessibility（可访问性）

我是网站可访问性兼容的提倡者，相比于网站的漂亮而言，我更喜欢他可访问性做的好点。

如果你给网站用像素设置所有的字体大小，元素大小以及间距大小，那么你就没有尊重终端用户。

在大多的浏览器，用户可以自己设置默认的字体（浏览器默认字体大小是16px），如果用户将默认字体设置为20px，那么所有的字体应该相应的缩放。

但是，如果网站以像素构建网站，那么一个30px的头部就是30px，这对于设计师或者开发者来说，听起来不错，但是你不是用户，不要自己觉得网站是怎样就怎样。

幸运的是，以像素为单位设置字体大小并不会完全破坏可访问性。 用户还可以使用ctrl + +/-（cmd而不是OS X上的ctrl）放大和缩小。 但是，我们可以做得更好。

Rem

如果你对于网站建设很熟悉，毫无疑问你听说过rem，如果没有，REMs是一种基于根HTML元素的字体大小设置字体大小的方式。它们还允许您通过更改根字体大小（例如在某个媒体查询/屏幕大小）快速缩放整个项目。

“[REM]单位表示根元素的字体大小（例如<html>元素的字体大小）。当在此根元素上的font-size上使用时，它表示其初始值。“[3]

如何从REM计算PX
一个基本和最常见的例子：html font-size设置为10px，设置10px的根字体大小是我看到使用REM的人最常见的情况。它允许通过将数字除以10将像素值与REM值之间的快速转换。但是，将基本字体大小设置为像素仍然具有与上述像素示例相同的问题。可访问性差。

那么我们怎样才能打破我们的可访问性虚拟空间？
将根HTML字体大小设置为百分比。这是用户默认浏览器字体大小的一个百分比。一个典型的方法是将HTML font-size设置为62.5％。这是因为16px（典型的默认浏览器字体大小）的62.5％是10px。那仍然会使1.6rem = 16px。这意味着如果用户的默认浏览器字体大小更改为例如20px，则1.6rem现在将等于20px。所以如果你的用户想要更大的字体让他们随便设置。

理想的情况是将HTML font-size保留为100％，但这确实会使数学变得更加困难。例如，16px现在是1rem，20px是1.25rem，24px是1.5rem等

Sass / SCSS抢救
在你的头脑中工作所有这些数字将是相当耗时的。幸运的是，如果您使用Sass / SCSS，LESS或任何其他CSS预处理器，您不用担心。您可以使用函数为您计算这些内容。

Em怎么样呢？

EM最初以与REM相似的方式执行，直到设计到嵌套。 我从来不是em的粉丝，特别是当涉及到字体大小。 例如，取一个字体大小为2em的div，然后添加一个字体大小为2em的段落。 该段的font-size现在是相对于div的2ems。 我就不知道到底这个段落的字体大小是多少了，很快就变得难以控制。 这是REM解决的 - 大小总是指向根。

媒介查询怎么样呢？

所以我们已经确定，使用像素值会覆盖浏览器的默认设置，因此只需将所有像素大小转换为REM即可就好了吗？ 答案是不完全对的。

这篇博客文章强调了媒体查询（https://zellwk.com/blog/media-query-units/）中使用像素，EM和REM之间差异的一些关键。 去阅读，然后回来。

总之，使用浏览器缩放时，各种浏览器中的媒体查询的像素和REM都会失败，而EM是我们拥有的最佳选择。 REMs在这一点上比像素还差，所以我们应该在媒介查询上面不考虑他们了。

这确实有点棘手了，当涉及该单位的小数位的差异时，EM和像素都会与媒体查询有垮台。 如果您恰好在同一代码块中使用最小和最大宽度的媒体查询，则一旦用户开始更改其浏览器缩放或默认字体大小，将会出现糟糕的响应式。

那么解决方案是什么？
不幸的是，没有答案。在浏览器整理问题之前，我们有点卡住了。

最简单的可接受选项是，我们不会在同一个块中创建最小宽度和最大宽度的重叠。例：

EM vs REM vs PX，为什么你不应该”只用px“”的更多相关文章

  1. css中px，em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  2. 说说css中pt、px、em、rem都扮演了什么角色

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

  3. 关于px、em和rem的学习笔记！

    刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...

  4. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  5. px，em，rem

    px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. em:继承 ...

  6. （转）px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  7. 深度讲解VIEWPORT和PX是什么？移动端单位px，em，rem

    刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...

  8. px和em和rem的区别

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

  9. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  10. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

随机推荐

  1. Python-面向对象（二）-Day7

    1.字段 12.方法 43.属性 63.1.属性的基本使用 73.2.实例:对于主机列表 83.3.属性的两种定义方式 94.对于类的成员而言都有两种形式: 144.1.私有成员和公有成员的访问限制不 ...

  2. Mego开发文档 - 事务

    事务 事务允许以原子方式处理多个数据库操作.如果事务已提交,则所有操作都已成功应用于数据库.如果事务回滚,则没有任何操作应用于数据库. 默认行为 默认情况下,如果数据库提供程序支持事务,则单次的提交操 ...

  3. 使用Putty实现windows向阿里云的Linux云服务器上传文件

    1.首先获取PSCP工具 PuTTY小巧方便.但若需要向网络中的Linux系统上传文件,则可以使用PuTTY官方提供的PSCP工具来实现上传.PSCP是基于ssh协议实现. 可以点击这里下载 2.启动 ...

  4. springmvc的ModelAttribute注解

    先看一个没有使用@ModelAttribute的Controller方法. @RequestMapping("/save") public String save(User use ...

  5. 基于dns搭建eureka集群

    eureka集群方案: 1.通常我们部署的eureka节点多于两个,根据实际需求,只需要将相邻节点进行相互注册(eureka节点形成环状),就达到了高可用性集群,任何一个eureka节点挂掉不会受到影 ...

  6. 基于JWT标准的用户认证接口实现

    前面的话 实现用户登录认证的方式常见的有两种:一种是基于 cookie 的认证,另外一种是基于 token 的认证 .本文以基于cookie的认证为参照,详细介绍JWT标准,并实现基于该标签的用户认证 ...

  7. 对于错误“Refused to execute script from '...' because its MIME type ('') is not executable, and strict MIME type checking is enabled.”的处理。

    今天在是用公司的报表插件Stimulsoft时发现的问题.之前可以正常使用,突然不能加载了.查看发现得到这个错误. 查看请求头 可以看到,请求正常响应,但是发现 Content-Type是空的,但是引 ...

  8. Python/MySQL（一、基础）

    Python/MySQL(一.基础) mysql: MYSQL : 是用于管理文件的一个软件 -socket服务端 (先启动) -本地文件操作 -解析 指令[SQL语句] -客户端软件 (各种各样的客 ...

  9. uva 10917 Walk Through The Forest

    题意: 一个人从公司回家,他可以从A走到B如果从存在从B出发到家的一条路径的长度小于任何一条从A出发到家的路径的长度. 问这样的路径有多少条. 思路: 题意并不好理解,存在从B出发到家的一条路径的长度 ...

  10. lvs 负载均衡 NAT模式

    1.原理 基于NAT机制实现.当用户请求到达director之后,director将请求报文的目标地址(即VIP)改成选定的realserver地址,同时将报文的目标端口也改成选定的realserve ...