最近在学习小程序，要把html的代码转换成小程序界面，其中就遇到了rem的转换问题，但小程序不太兼容rem，不是不能用rem，而是没办法设置根元素的font-size，因为rem是相对于根元素的font-size，而小程序的根元素font-size一直是16px。既然我设置了page{ font-size:1px }也不起作用，那要怎么实现rem呢
这里我用css变量来实现伪rem，定义一个css变量--app-rem-size，然后在各个屏幕尺寸中定义--app-rem-size大小值；
以下是app.wxss文件
page{
--app-rem-size:10px;
font-size:calc(var(--app-rem-size)*1.2);
}
@media screen and (min-width: 320px) and (max-width: 359px) {
page {
--app-rem-size: 10px;
}
}
@media screen and (min-width: 360px) and (max-width: 413px) {
page {
--app-rem-size: 12px;
}
}
@media screen and (min-width: 414px) {
page {
--app-rem-size: 14px;
}
}适用于移动设备弹性布局的js脚本(rem单位)
目前，随着移动设备的普及和4G网络的普及，web在移动端的占比已经远远超过PC端，各种H5页面推广页面，H5小游戏热度火爆。以前简单的使用px单位（没有弹性）的时代已经无法满足各位设计师和用户了
rem布局完成响应式开发，通俗且详细的原理解析和代码实现
rem可以理解为一个长度单位，单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px，那么1rem就等于16px，0.5rem等于8px。根据这个原理，如果网页默认的字体大小改变，那么单位rem的大小也会改变
移动端适配flexible rem布局方案
如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。
移动端rem适配
1：css3的media query来实现适配，例如下面这样；2.通过js动态设置html字体，例如下面这样：默认设计图为640的情况下1rem=100px；根据自己需求修改
rem js相关
规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载
css rem应用
根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小，适应不同的屏幕比例。本文的px转rem换算公式为:100px = 1rem
华为，小米部分机型微信浏览器rem不适配的解决方案
针对近日华为，小米的部分机型，在升级系统或升级微信之后，微信内置浏览器产生的rem不能正确填充满的问题，有如下解决方案，目前来看，产生这个情况的原因是因为给html附font-size时
css中1px等于多少rem？
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。rem 和 em 一样，也是一个相对大小的值，它是相对于根元素 <html>。
了解并使用 CSS 中的 rem 单位
今天我们深度了解一下 rem 单位，这个单位目前已经得到了优秀浏览器的支持，并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。
rem是如何实现自适应布局的？
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位，近一两年开始崭露头角
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!