REM——适合移动开发的自适应方案
文章目录
- 1.什么是REM
- 2.REM和EM的区别
- 3.手机端方案的特点
- 4.使用JS动态调整REM
- 5.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为单位。
转载于:https://www.cnblogs.com/YooHoeh/p/10659694.html
REM——适合移动开发的自适应方案相关推荐
- 移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案 说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- 最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码
<h2>源码介绍</h2> 分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码,前端界面采用BootStrap框架设计,使得博客系统界面 ...
- 脚本语言适合物联网开发吗
序言 物联网在今天已经不是一个新词汇,尤其是"物"这么接地气的东西,在互联网深入到各行各业时,自然而然会结合在一起,形成物联网. 这个"物",就是千奇百怪.多种 ...
- css 网页自适应方案 大屏自适应方案
自适应需要解决的问题 屏幕像素大小不同,统一表现 画面比例不同,统一表现 浏览器字体最小限制,不可能无限等比缩小 自适应不成功的表现: 4. 画面出现拉伸压缩 5. 文字内容显示异常 6. 画面出现空 ...
- 《敏捷迭代开发:管理者指南》—第2章2.5节渐进开发和自适应开发
本节书摘来自异步社区<敏捷迭代开发:管理者指南>一书中的第2章2.5节渐进开发和自适应开发,作者[美]Craig Larman,更多章节内容可以访问云栖社区"异步社区" ...
- c语言既适合于开发,C语言试题及答案 (1)
C语言试题及答案 (1) 文章<C语言试题及答案 (1)>是由[作文仓库]的会员[我这么冷你怕不怕]为大家整理并分享的,仅供大家参考,欢迎阅读! 第1章 C语言概述习题 1. 单项选择题 ...
- 如何让一种币更有生命力——一种BCH开发资金募集方案大讨论
第0章 引言 作者:闪电HSL 最近几天BCH社区异常激励地讨论着在5月19日的一次在香港开的关于募集BCH开发资金主题会议的事,本文主要想写明白这个主题会议上到底发生了什么,尤其是后面几天社区的各种 ...
- python语言开发的软件有哪些-最适合人工智能开发的5种编程语言,你知道几种?...
原标题:最适合人工智能开发的5种编程语言,你知道几种? 私信我或关注微信号:猿来如此呀,回复:学习,获取免费学习资源包. 人工智能技术的提升不仅为企业的运营带来了效率,而且为人民的生活带来了便利. 迄 ...
最新文章
- 多线程 Thread类
- c# dataGridView 设置
- POJ 1723 Soldiers (中位数)
- 逐行粒度的vuex源码分析
- php5.5 反序列化利用工具_Yii框架反序列化RCE利用链2
- Linux系统和UNIX系统简介
- python 上传文件并保存
- 移动边缘计算与计算卸载概述
- 爬取王者荣耀皮肤图片
- 亚马逊美国买家账号怎么注册
- 2022年4月13日记
- 超好看的粒子效果文字动画特效HTML5源码
- 对于“高德地图”的使用感受
- 日常一些办公软件问题
- keycloak 验证 token
- Linux 配置本地域名项目
- Task 05:样式色彩秀芳华
- vmware部署优麒麟系统
- mysql_connect函数怎么调用,PHP连接MySQL数据库的连接函数mysql_connect的第三个参数是( )。...
- 大小鲨鱼走红 纳米防水技能大有作为