那些年被"62.5%"欺骗过的rem

jkyin 发布于2019-08-01 17:01 / 2292人阅读

摘要：为了解决这个问题，救星出现了。为什么呢因为谷歌只允许最小是测试按网上那些人的道理，两个本应该一样宽的。但是呢，现实是这个样子的实际上你用谷歌是跟下图，但用万恶的打开是蓝色比较短，火狐是一样长。而且火狐谷歌等等浏览器都兼容的。

前言
有过移动端开发经验的人都知道，ios跟android页面的 像素(px)密度 不一样。这就有点尴尬了，因为在android这边一个div 180px刚刚好，但是去了ios那边可能就不一样了，可能会造成页面变得扭曲。
为了解决这个问题，救星——rem出现了。它的值默认是1rem == 16px,这样子的话计算起来就不是很方便了。所以很多人喜欢把它设置成1rem == 10px。10/16就是 0.625。我们的主角出现了！

怎么设置rem
很多人知道在根节点设置，也就是 html{font-size:62.5%;} 就可以了。我不知道是谁一开始就这么说的。但我知道这个人也太不负责任了。为什么呢？因为谷歌只允许font-size最小是12px.




      
      测试rem

按网上那些人的道理，两个div本应该一样宽的。但是呢，现实是这个样子的......（实际上你用谷歌是跟下图，但用万恶的IE打开是蓝色比较短，火狐是一样长。）各个浏览器还不一样，这很是尬尴啊！

如何正确设置rem的大小
还是在根节点设置，但代码就要改成这样了。

html{font-size: 625%;}

或者

html{font-size:100px;}

不过现在的1rem 是等于 100px，但是整的倍数比较容易计算啊。而且IE、火狐、谷歌等等浏览器都兼容的。不会说在各个浏览器还长短不一样，这种情况不存在的！

GPU云服务器云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50898.html

the-clean-architecture

过去几年，我们已经看到了一系列关于系统架构的想法，包括：六边形架构（接口与适配器）洋葱架构(Onion Architecture)Screaming ArchitectureDCIBCE这些架构有很多共同的点（思想），尽管它们细节上有所不区别,它们都有相同的目标，那就是关注点分离（the speration of concerns）, 它们都是通过将软件分层来实现这种分离，每个组件至少有一个用于业...

社区管理员 2022-10-08 14:15 评论0 收藏0
Spring事务&分布式事务&单服务处理多数据源事务

本文以一个实际业务问题来谈谈事务该如何处理。对接外部系统是是不可避免的，从广泛意义上来说，外部系统范围很大，中间件（数据库）也属于外部系统。当我们讨论事务时，通常我们将那些没有支持事务的系统称为外部系统，业务系统基本上都是外部系统。问题有这样一套系统，以gitlab为底层系统，在gitlab project的基础上封装了代码仓，系统对其中一些与gitlab关联的数据进行了落表。创建代码仓的逻辑过...

社区管理员 2022-10-08 13:56 评论0 收藏0
CSS外挂：Sass的那些装逼函数(function)

摘要：，返回的最大值。非相同的单位，报错编译为，返回一个随机数。函数函数称为三元条件函数，主要因为他和中的三元判断非常的相似。颜色函数暂时还没用到过。函数，根据三个值创建一个颜色将一个颜色根据透明度转换成颜色。前戏：前几篇文章其实都是些基础必备的，什么变量、继承、占位符、混合宏...这回来高级点的，玩玩Sass 自带的一些函数...有字符串函数(String Functions)、数字函数...

booster 2019-08-30 12:56 评论0 收藏0
关于云原生应用程序你需要知道的 6 件事

#1。什么是云原生？根据您的要求，云原生可能意味着很多不同的事情。十年前，云原生一词是由 Netflix 等利用云技术的公司创造的，从一家邮购公司发展成为世界上最大的消费者点播内容交付网络之一。 Netflix 开创了我们所谓的云原生模式，重塑、转变和扩展了我们所有人都希望以何种方式进行软件开发。随着 Netflix 的巨大成功及其更快地向客户提供更多功能的能力，公司想知道云原生技术如何帮助 ...

917591759 2022-09-22 17:17 评论0 收藏0
浅谈px,em与rem

摘要：关于表示像素计算机屏幕上的一个点，是绝对单位，不会因为其他元素的尺寸变化而变化关于任意浏览器的默认字体高都是。有如下特点的值并不是固定的会继承父级元素的字体大小。避免字体大小的重复声明。所有未经调整的浏览器都符合。关于px px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化关于em 任意浏览器的默认字体高都是16px。所...

Yujiaao 2019-08-29 12:25 评论0 收藏0