摘要：特别注意的是，浏览器默认浏览器默认最小字号为所以一般情况下，的不要小于动态动态其实是为移动端适配而诞生的。动态思路动态采用整体缩放的思想，在页面渲染之前，使用获取设备宽度并设置，之后的布局单位全部使用来实现整体缩放。
前言
总是看到em、rem、动态rem，究竟他们的区别是什么呢？
单位px：像素
em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（）的 font-size
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
由上述可知，rem和em根本没有任何联系。
特别注意的是，浏览器默认 font-size:16px;Chrome浏览器默认最小字号为12px：font-size:12px;所以一般情况下，rem 的font-size不要小于12px;
动态rem其实是为移动端适配而诞生的。动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem，之后的布局单位全部使用rem来实现整体缩放。
使用方法值得注意的是，pageWidth根据实际情况可以适当的缩小（如0.1倍），但是要特别注意缩小后会不会小于浏览器规定的最小字体。在使用动态 rem 布局的移动端页面中，单位可以混用，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116223.html
摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...
摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...
移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下； 网上找不到主流android设备的数据表，就以iphone为例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6为例：竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；竖屏...
移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下； 网上找不到主流android设备的数据表，就以iphone为例：showImg(https://segmentfault.com/img/bV8ZZH?w=857&h=434); 以iphone6为例：竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）；竖屏...
阅读 3441·2021-11-15 11:36
阅读 918·2021-11-11 16:55
阅读 528·2021-10-20 13:47
阅读 2683·2021-09-29 09:35
阅读 3108·2021-09-08 10:45
阅读 2460·2019-08-30 15:44
阅读 633·2019-08-30 11:10
阅读 1321·2019-08-29 13:43
