【译】PX、EM还是REM媒体查询？
原文链接：https://zellwk.com/blog/media-query-units/
你有没有想过使用媒体查询的时候到底该用px、em还是rem作单位呢？我曾经也有同样的疑问，而且我到现在也还没弄明白。
当我一年多以前开始建立mappy-breakpoint库的时候，我用的是rem。当我与Sam Richard聊过之后，我转用了em，因为我发现二者并无差异。
除了em和rem，另一个常用于媒体查询的单位是我们的老朋友px。如今所有浏览器都已解决了px缩放问题，可能现在我们也可以使用px媒体查询了。
这周我终于下定决心彻底搞懂这个问题。
在我们开始前，我假设你已经知道了em和rem是什么，如果你不清楚，请阅读这篇文章。
#基础实验
我创建了三个div元素，分别用于测试px、em、和rem。我给每个div指定了一个背景颜色，易于辨认。
.pixel { background: red; }
.em { background: green; }
.rem { background: blue; }
接着，因为我们是在比较媒体查询单位，所以我分别在三个选择器上各建立了一个min-width查询。
我决定在查询起作用时降低元素的不透明度，这样我马上就能看出区别。这是使用px的媒体查询的CSS代码：
@media (min-width: 400px) {
.pixel {
opacity: 0.5;
}
}
下一步是搞清楚怎样使用em和rem单位。
在第一次实验中，我想看看在理想环境中这三个单位是否有区别，也就是说，以下任何情况都没有发生：
1.<html>的font-size发生了改变
2.用户放大了页面
3.用户修改了浏览器字体设置
既然现在所有条件都是理想的，我可以假设16px == 1em == 1rem，这没什么问题，那么400px就等于25em或者25rem。
@media (min-width: 400px) {
.pixel {
opacity: 0.5;
}
}
// 400 / 16 = 25
@media (min-width: 25em) {
.em {
opacity: 0.5;
}
}
// 400 / 16 = 25
@media (min-width: 25rem) {
.rem {
opacity: 0.5;
}
}
如果三个媒体查询的行为是一致的，它们应该都会刚好在400px触发。
事实也是如此（在我所测试过的浏览器上）。
基础实验
因为三个媒体查询全都在同一个断点触发，在此阶段px、em和rem媒体查询并无区别。
建立了基础实验之后，下一步就是测试在条件非完全理想时，即以上所提条件之一可能会发生，再一次提醒，这些情况分别是：
1.<html>的font-size发生了改变
2.用户放大了页面
3.用户修改了浏览器字体设置
我们来一个一个地测试吧。
#1.<html>的font-size发生了改变
第一种情况非常普遍。事实上，几乎所有网页都在他们的CSS文件中使用这种方法来改写默认的font-size。
html { font-size: 200%; }
在我的测试中，我使用了200%的font-size，也就是说，我设置了1em和1rem都等于32px。如果em和rem受font-size改变的影响，它们应该只在800px的时候触发。
结果是，在Chrome、Firefox和IE11上三个媒体查询都是在400px触发。
Chrome, Firefox, IE11上的结果
这是正确的行为，em和rem不应该被HTML中font-size的改变所影响，因为它们是基于浏览器内部的font-size的。
不幸的是，在Safari上我们观察不到这种正确的行为，它会在800px触发rem媒体查询:(
Safari上的结果
因为这种行为只在Safari中发生，我很好奇手机端Safari是否也受影响，事实是，它们也受了影响。
所以，第一种情况告诉我们不应该在媒体查询中使用rem，不过，我们还是在接下来的实验中保留rem，看看会不会发生其他事情。
#2.用户放大了页面
第二种情况也很普遍。如果你的网页上的字体不够大，用户可能会使用浏览器的缩放功能来放大字体。
小知识：最初是因为老浏览器不能随用户缩放页面更新px值，才有了em。在这种情况下，测试用户缩放页面情况下使用不同单位的媒体查询行为的不同，可以帮助我们解答现在是否可以使用px媒体查询这个问题。
用户放大页面
这次实验的结果是Chrome、Firefox和IE的行为是一致的，使用px作单位的查询与em和rem一样在相同时间触发。
Chrome, Firefox, IE11上的结果
但猜猜怎么着......Safari并没有这样做:(
Safari上的结果
不幸的是，这表示使用px作单位的媒体查询也是不可能的事了，因为Safari不能恰当地支持它们（除非你打算放弃Safari？）。
好吧，让我们继续最后一个实验，看看还有没有意料之外的事情发生。
#3.用户修改了浏览器字体设置
很多开发者认为用户不会修改他们浏览器的字体大小，因为这项设置藏得非非非常深。
好吧，如果所有用户都这样做，那真的是太棒了，这样我们就不用做这个实验了！:)
不幸的是，没有数据证明用户不会修改他们浏览器的字体大小，所以为我们的网站增加灵活性依然是我们作为开发者的责任。
在此次实验中我测试的4个浏览器上，我增大了默认字体大小，以下是设置方式（如果你想跟着修改的话）：
1.Chrome: 设置 -> 外观 -> 字号
2.Firefox: 选项 -> 语言和外观 -> 字体和颜色
3.Internet Explorer: 菜单栏 -> 查看 -> 文字大小
有一个浏览器我无法找到如何设置字体大小，那就是Safari，所以我改用了一个代理方法。我改变了浏览器设置，使得最小字体大小大于16px，方法是preferences -> advanced -> acessibility。
这次测试是唯一一个在所有浏览器上表现一致的。
在第三种情况下所有浏览器的结果
如你所见，使用px的查询比使用em或rem的查询都要早触发。
这并不是bug，这种实现是正确的，因为px是绝对单位，不管用户怎样设置他们的默认字体大小，断点都应该保持为400px。
而em和rem是基于浏览器的字体大小的，因此，当用户修改了默认字体大小设置时，它们的媒体查询也应该更新。
所以......pixel爱好者，很抱歉戳破了你的幻想泡泡，但是基于pixel的媒体查询是绝不可能的。
（如果你不太理解最后一个实验，这里有更详细的解释。）
如果你写了一个网站，网站的断点是600px，这个600px断点对16px（默认）的字体大小来说是很好的。
在这里我们把小于600px的视口叫做“小视口”，大于600px的叫做“中视口”。
我们再进一步假设你只在600px改变布局，小于600px时使用一栏布局，大于600px时使用两栏布局。
现在把你的浏览器字体大小设置为20px，然后在650px视口打开你的网站。
如果你的媒体查询用的是em或rem，你的用户会在650px视口看到一栏布局，这个行为在以上提到的前两种情况中也是一致的。
如果你的媒体查询用的是px，你的用户会在650px视口看到两栏布局，这个行为在前两种情况中是不一致的（而且这种设计与窗口也不相符）。
#总结
从以上测试可以看出，在4个浏览器中保持表现一致的唯一单位是em。除了在Safari上找到的bug外，em和rem并无任何区别。
这三个实验中，px媒体查询在其中两个都表现很好（除了在Safari上）。不幸的是，在第三个实验中，px媒体查询的断点一直是400px，如果你打算支持会修改浏览器字体大小设置的用户，你就不可能使用px媒体查询。
因此，我从这些实验中得出的结论就是：使用em媒体查询。
如果你用的库没有用em媒体查询，把这篇文章给那个库的开发者看看，好让他们知道他们写的代码可能会有什么后果。或者改用一个使用em媒体查询的库，如Mappy-breakpoints、Breakpoint-sass或sass-mq。
【译】PX、EM还是REM媒体查询？的更多相关文章
- html --- rem 媒体查询
rem是一种相对长度单位,参考的基准是<html>标签定义的font-size. viewport 做移动端的h5,通常会在HTML文件中指定一个<meta>标签: <m ...
- css中单位px,em，rem和vh/vw的理解
>px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...
- 网页常见单位： px em pt % rem vw、vh、vmin、vmax ， rem 使用
1.网页常见单位: px em pt vw\vh rem 1.1 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言 (最终解析单位) em单位名称为相对长度 ...
- 彻底弄懂px,em和rem的区别
国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...
- px em 和rem之间的区别
背景: px:像素是相对于显示器屏幕分辨率而言的相对长度单位.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和rem. e ...
- 详细讲解css单位px,em和rem的含义以及它们之间的区别
一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚 ...
- rem媒体查询
@media only screen and (min-width: 1080px), only screen and (min-device-width:1080px) { html,body { ...
- Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询
html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...
随机推荐
- vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
- linux 用户密码过期时间
/etc/login.defs 全局配置文件,即当新建用户时的默认设置 PASS_MIN_DAYS 5 #最近一次密码更新的日期+0 ,即允许用户更改自己的密码的日期 PASS_MAX_ ...
- 关于CC的完全非线性椭圆方程一书的一些小结
CC的整本书主要是想要研究在粘性解的框架下的一致椭圆方程解的正则性.我们试着一章一章来解析他. 序言部分也是值得每一个字细读的,主要讲述了他们的工作的主要内容,即在粘性解的框架下研究解的正则性,需要特 ...
- 20165309 《网络对抗技术》实验一：PC平台逆向破解
20165309 <网络对抗技术>实验一:PC平台逆向破解 目录 实践目标 基础知识 实验原理.内容及步骤 问题与解决 实验收获 一.实践目标 本次实践的对象是一个名为pwn1的linux ...
- redis 高可用
Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端)都没有实 ...
- 每日算法---Two Sum
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- Visual Studio 向工程中添加文件夹
将要添加的文件夹拷贝到工程的目标文件夹中. 打开工程,在Solution Explorer中选中“Show All Files”按钮. 然后VS会显示文件夹中包含,但是不在工程中的文件夹. 右键该文件 ...
- 洛谷1855 榨取kkksc03
题目描述 洛谷2的团队功能是其他任何oj和工具难以达到的.借助洛谷强大的服务器资源,任何学校都可以在洛谷上零成本的搭建oj并高效率的完成训练计划. 为什么说是搭建oj呢?为什么高效呢? 因为,你可以上 ...
- CentOS7系统上的GPSTK示例代码调试 & 运行结果 & 心得
下载的源码程序包中,共有16个例子,这里记录它们的调试及运行结果,尤其是哪些可用,哪些不可用,今后使用时用作参考. 总结: (1)在 18 个示例程序中,example16 和 example17 编 ...
- 关于node_js的比较
node_js的比较是我自己初学遇到的第一个绕脑的事情. 在比较的函数多了之后,一些函数的调用和变量提升, 搞得自己头晕,有时候函数是没有返回值的,自己还在 用变量值去比较,实际上却是undefine ...