REM——适合移动开发的自适应方案
1.什么是REM
先来认识几个常见单位：
- px：像素，这个大家都知道。
- vh：viewport height，视窗高度，是指占整个浏览视窗高度的百分数。
- vw：viewport width，视窗宽度，是指占整个浏览视窗宽度的百分数。
- em：一个大写字母M的宽度（有时候也说一个汉字的宽度，但其实是错的），多少em是指大写字母M的宽度的倍数
而rem（Root em） ，理解过来是指根元素（<html>标签）中的font-size，虽然rem中有em但是这里两个单位没有任何关系，这里需要特别注意。
举个例子，chrome默认字体大小为16px，如果不设置html{font-size:XXpx},所以在这时1rem就是16px，
2.REM和EM的区别
首先两者什么关系都没有！
em是指自身的font-size的倍数，这里举个例子
html {
font-size:16px;
｝
p {
font-size:12px;
height:2em; /*2 x 12 = 24px*/
width:2rem; /*2 x 16 = 32px*/
}
3.手机端方案的特点
由于分辨率不统一，不同品牌不同设备的屏幕显示比例不同，移动端开发需要做适配的话只能使用等比例放大缩小来进行（这里不考虑响应式，只是在接近的分辨率中进行比较）。
4.使用JS动态调整REM
如果想通过缩放来显示内容，就必须与显示的宽度（innerWidth）有关系。但是像上面的说的，这几个单位除了vw之外都和显示宽度没有关系。然而，vd目前浏览器兼容性很差，别说手机，就是电脑浏览器都有些不兼容。因此，就有人想出使用JS来获取显示宽度进行设 置。只需要在html页面中，加载css文件之前添加以下代码
<script>
document.write(`<style>html{font-size:${document.innerWidth}px;}</style>)；
</script>
在此之后可以利用1rem=innerWidth来进行布局，这个时候1rem=100vd。如果觉得小数太小了写着不方便也可以取font-size==｛doucment.innerWidth/10｝,注意，这里不要用100的，因为有的浏览器会设置最小字体，比如chrome浏览器默认最小为12px，当设置小于这个值的时候会不生效
5.REM与其他单位同时存在
当使用rem的时候不影响其他的单位使用，有时候考虑到以rem为单位的换算成px可能不到一像素，这个时候还是使用px为单位。
REM——适合移动开发的自适应方案的更多相关文章
- 有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- CSS9:动态 REM-手机专用的自适应方案
CSS9:动态 REM-手机专用的自适应方案 动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是专门的手机端, ...
- 适合前端开发的 Chrome 扩展有哪些？（十款）
适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
- finereport普通报表的移动端自适应方案
移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可 ...
- Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构
分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
- 如何通过 WebP 自适应方案减少图片资源大小
前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能 ...
- 为什么使用dojo？dojo与jquery有什么不同？dojo适合什么开发场景？
首先介绍一下dojo的特性: 1.Dojo是一个符合AMD规范的企业级框架(dojo是一个重量级框架) 2.Dojo全面支持异步加载JS机制(即:支持通过require异步加载JS模块,通过defin ...
- 原生js移动端字体自适应方案
自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...
随机推荐
- 扩展欧几里得(exgcd)与同余详解
exgcd入门以及同余基础 gcd,欧几里得的智慧结晶,信息竞赛的重要算法,数论的...(编不下去了 讲exgcd之前,我们先普及一下同余的性质: 若,那么 若,,且p1,p2互质, 有了这三个式子, ...
- Spring Cloud微服务实践之路-起始
由于各种原因,公司要对现有的营销产品进行微服务化,如果可以,则对公司所有产品逐步进行微服务化. 而本人将探索这条路,很艰难,但干劲十足.整个过会记录下来,以便以后查阅. 感谢公司!感谢领导! 相关书籍 ...
- python函数的闭包
---恢复内容开始--- python允许有内部函数,也就是说可以在函数内部再定义一个函数,这就会产生变量的访问问题,类似与java的内部类,在java里内部类可以直接访问外部类的成员变量和方法,不管 ...
- python爬虫实例项目大全
WechatSogou [1]- 微信公众号爬虫.基于搜狗微信搜索的微信公众号爬虫接口,可以扩展成基于搜狗搜索的爬虫,返回结果是列表,每一项均是公众号具体信息字典. DouBanSpider [2]- ...
- Python面向对象之反射
一.反射的基本概念 二.反射示例 三.反射的应用 一.反射的基本概念 反射:可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python中一切皆对象,都可以使用反射. 反射有 ...
- Thunar 通过快捷键在当前文件夹打开终端
参考『Keyboard shortcut for open terminal here in thunar』\(^{[1]}\) 在 ganiserb/thunar-terminal 下载脚本. 将脚 ...
- 多个Fragment在一个activity中通过按钮的展示方法
fragment使用方法 1. 创建主Mainactivity extends AppCompatActivity 2. Oncreate & setContentView 3. 完成XML的 ...
- JAVA进阶15
间歇性混吃等死,持续性踌躇满志系列-------------第15天 1.TCP网络程序 package code0329; import java.io.BufferedReader; import ...
- 双目立体匹配——归一化互相关（NCC）
归一化相关性,normalization cross-correlation,因此简称NCC,下文中笔者将用NCC来代替这冗长的名称. NCC,顾名思义,就是用于归一化待匹配目标之间的相关程度,注意这 ...
- JustSoso笔记
当时想了大半天,想着到底要怎么绕过MD5呢,结果还是没做出来,即使问了学长,自己还是漏了一个步骤,file=hint.php,特此笔记,又学到了个引用变量的知识 学习自 https://www.ctf ...