具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。
rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em。
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。
在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间，把rem布局的原理搞清楚。
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含
因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器翻译成 从16px到 160px 或其他任意值。
先看看 rem 兼容性（基本上所有主流的浏览器都支持）-https://caniuse.com/#feat=rem
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
rem:参考的是根元素（html）字体大小 （统一的，一个页面只有一个html）
0. 前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者
@media mediatype and | not lonly (media feature) {
前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6 中每个文件都是单独的一个模块。
手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
前言 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。 特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: 简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种
REM 代表 font size of the Root element，即 Root EM。REM 是值/数据类型长度的值。长度的另外一个值是我们老朋友 - 像素 px。每个接受长度作为值的属性都接受 REM 值。比如：margin, padding, font-size 等。
将元素的字体大小设置为 medium 可以将其设为浏览器默认大小，通常为16 px。 以下是设置元素字体大小的 CSS 代码示例：
随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。
听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈
该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。
在 CSS 样式中，有几种常见的长度单位，包括 rpx 、 px 、 vw 和 vh 等，含义解析如下：
在开发需要适配各种设备的响应式网站时，正确了解的 CSS 范围很重要。在做具体的决策之前，我们对它们先分个类：
我们可以将这个单位用于边距和填充，因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。元素 font-size 会根据设备大小而变化，因此元素周围的间距也将分别发生变化。
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
大家都知道转换px单位的插件很多，著名的有postcss-px-to-viewport和postcss-pxtorem，前者是将px转换为vw，后者是将px转换为rem，简化了不常用的配置。将成为vw优先单位，以rem为退货模式。考虑到vw在移动设备上的支持不如rem，这个插件很好的解决了这个问题。然后简单介绍一下。
移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。
css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。
意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的，举一个简单的例子，
说到rem自然就会想到em，我们知道em是相对于父元素的字体大小的单位，那么rem则是相对于根元素也就是元素的字体大小的单位。
最近参与了APP内嵌H5页面的开发，这次使用vuejs替代了jQuery，仅仅把vuejs当做一个库来使用，效率提高之外代码可读性更强，在此分享一下自己的一些开发中总结的经验。 关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 网易云的方案总结为：根据屏
手机淘宝团队出的简洁高效移动端适配库 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。 我们要做的,就是确定好我们当前设备的html文字大小就可以了 比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/ 10)就可以 里面页面元素rem值:页面元素的px值/ 75 剩余的,让flexible.js来去算
rem（font size of the root element）是指相对于根元素（即html元素）的字体大小的单位。 假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如
前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!
说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
在CSS中，尺寸单位是决定元素大小的关键。正确选择和应用单位不仅关乎布局的美观，还直接影响到网站的响应式设计和可访问性。本篇博客将深入浅出地探讨四种常见的属性值单位——像素（px）、相对单位em、rem以及百分比（%），分析它们的特性、应用场景、常见问题以及如何避免这些误区，并提供实用的代码示例。
一、CSS单位 1.绝对单位 在CSS中，绝对单位定义的大小是固定的。使用的是物理度量单位，显示效果不会受外界因素影响。 但绝对单位一般多用于传统平面印刷，而极少用于前端开发。 在前端开发中，都不会用到绝对单位。 2.相对单位 在CSS中，相对单位定义的大小是不固定的。 （1）常见的相对单位 相对单位 说明 px 像素 % 百分比 em 1em等于当前元素字体大小 rem 1rem等于根元素字体大小 （2）px 全称pixel，像素，指的是一张图片中最小的点，或计算机屏幕中最小的点。
[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
