关于rem自适应的一点研究
参考地址:http://m.ctrip.com/html5/
https://www.amazon.cn/
rem是相对于html根元素的一个单位。rem是px的16倍,即1rem = 16px;除了IE低版本浏览器不支持它以外,其他都支持,看下图:
现在大部分浏览器IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示font-size是16px即
html {font-size:16px; }
那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是
p {font-size: 0.75rem; //12÷16=0.75(rem) }
用它的好处就是,只要改变根的大小,后面所有的rem设置都会改变,这样很好做屏幕适配。
rem进行屏幕适配
在讲rem屏幕适配之前,先说一下一般做移动端适配的方法,一般可以分为: 1 简单一点的页面,一般高度直接设置成固定值,宽度一般盛满整个屏幕。 2 稍复杂一些的是利用百分比设置元素的大小来进行适配,或者利用flex等css去设置一些需要定制的宽度。 3 再复杂负责一些的响应式页面,需要利用css3的media query属性来进行适配,大致思路是根据屏幕不同大小,来设置对应的css样式。 上面的一些方法,其实也可以解决屏幕适配等问题,但是既然出来的rem这个新东西,也一定能兼顾到这些方面,下面具体来说具体使用rem:
先看一个简单的例子:
.con {width: 10rem;height: 10rem;background-color: red;} <div class="con"></div>
这是一个div,宽度和高度都用rem来设置了,在浏览器里面是这样显示的, 可以看到,在浏览器里面width和height分别是160px,正好是16px * 10,那么如果将html根元素的默认font-size修改一下呢?
html {font-size: 17px; } .con {width: 10rem;height: 10rem;background-color: red; } <div class="con"></div>
再来看看结果:
这时width和height都是170px,这就说明了将rem应用与width和height时,同样适用与rem的特性,根据根元素的font-size值来改变自身的值,由此我们应该可以联想到我们可以给html设定不同的值,从而达到我们css样式中的适配效果。
rem数值计算
如果利用rem来设置css的值,一般要通过一层计算才行,比如如果要设置一个长宽为100px的div,那么就需要计算出100px对应的rem值是 100 / 16 =6.25rem,这在我们写css中,其实算比较繁琐的一步操作了,不过这其实都不是事。 想想我们现在的工程,哪个没有用构建的,前端构建中,完全可以利用scss来解决这个问题,例如我们可以写一个scss的function px2rem即:
@function px2rem($px){$rem : 37.5px;@return ($px/$rem) + rem; }
这样,当我们写具体数值的时候就可以写成:
height: px2rem(90px); width: px2rem(90px);;
看到这里,你可能会发现一些不理解的地方,就是上面那个rem:37.5px是怎么来的,正常情况下不是默认的16px么,这个其实就是页面的基准值,和html的font-size有关。
rem基准值计算
关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的主要有以下几点原因:
1 由于我们所写出的页面是要在不同的屏幕大小设备上运行的
2 所以我们在写样式的时候必须要先已一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定
3 假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的
4 iPhone6的屏幕大小是375px,
rem = window.innerWidth / 10
这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,假如不除以10,根据我们算出来的基准值会偏大,这样在设置html的font-size时候会偏小,我们知道浏览器的font-size如果小于12px就显示不出效果了,在这里列举一下其他手机的
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px / 10 = 32px
iphone6: 375px / 10 =37.5px
动态设置html的font-size
现在关键问题来了,我们该如何通过不同的屏幕去动态设置html的font-size呢,这里一般分为两种办法
1 利用css的media query来设置即
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){html{font-size: 37.5px;} }
2 利用javascript来动态设置 根据我们之前算出的基准值,我们可以利用js动态算出当前屏幕所适配的font-size即:
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
然后我们看一下之前那个demo展示的效果
.con {width: px2rem(200px);height: px2rem(200px);background-color: red; } <div class="con"></div> document.addEventListener('DOMContentLoaded', function(e) {document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'; }, false);
在iphone4下,显示169px
由此可见我们可以通过设置不同的html基础值来达到在不同页面适配的目的,当然在使用js来设置时,需要绑定页面的resize事件来达到变化时更新html的font-size。
rem适配进阶
我们知道,一般我们获取到的视觉稿大部分是iphone6的,所以我们看到的尺寸一般是双倍大小的,在使用rem之前,我们一般会自觉的将标注/2,其实这也并无道理,但是当我们配合rem’使用时,完全可以按照视觉稿上的尺寸来设置。
1 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏,也即是设备像素比(device pixel ratio)dpr比较大,所以显示的像素较为清晰。
2 一般手机的dpr是1,iphone这种高清屏是2,可以通过js的window.devicePixelRatio获取到当前设备的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。
3 拿到了dpr之后,我们就可以在viewport meta头里,取消让浏览器自动缩放页面,而自己去设置viewport的content例如
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
4 设置完之后配合rem,修改
@function px2rem($px){$rem : 75px;@return ($px/$rem) + rem; }
双倍75,这样就可以完全按照视觉稿上的尺寸来了。不用在/2了,这样做的好处是:
1 解决了图片高清问题。
2 解决了border 1px问题(我们设置的1px,在iphone上,由于viewport的scale是0.5,所以就自然缩放成0.5px)
但是rem也并不是万能的,下面也有一些场景是不适于使用rem的
1 当用作图片或者一些不能缩放的展示时,必须要使用固定的px值,因为缩放可能会导致图片压缩变形等。
2 再设置backgroundposition或者backgroundsize时不宜使用rem。
在列举几个使用rem的线上网站:
网易新闻:http://3g.163.com/touch/news/subchannel/all?version=v_standard
聚划算:https://jhs.m.taobao.com/m/index.htm#!all
转载于:https://www.cnblogs.com/freefish12/p/5567213.html
关于rem自适应的一点研究相关推荐
- (转)创建X509证书,并获取证书密钥的一点研究
创建X509证书,并获取证书密钥的一点研究 作者:肖波 个人博客:http://blog.csdn.net/eaglet ; http://www.cnblogs.com/eaglet 2007/7 ...
- 关于Unsafe类的一点研究
转载自 关于Unsafe类的一点研究 Unsafe类是java中非常特别的一个类.它名字就叫做"不安全",提供的操作可以直接读写内存.获得地址偏移值.锁定或释放线程. 通过正常途 ...
- caany边缘检测matlab,自适应canny算法研究及其在图像边缘检测中的应用.pdf
自适应canny算法研究及其在图像边缘检测中的应用.pdf 还剩 51页未读, 继续阅读 下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧,价低环保! 内容 ...
- 自适应均衡器的研究与仿真设计
在信息日益膨胀的数字化.信息化时代,通信系统担负了重大的任务,这要求数字通信系统向着高速率.高可靠性的方向发展.信道均衡是通信系统中一项重要的技术,能够很好的补偿信道的非理想特性,从而减轻信号的畸变, ...
- 【Paper】2020_面向多船协同的自适应编队控制方法研究
面向多船协同的自适应编队控制方法研究 文章目录 第三章 基于跟随船视距和视线角的自适应输出反馈编队控制 3.1 引言 3.2 问题描述 3.3 编队控制方案 3.4 主要结果 3.5 仿真验证 3.5 ...
- 超越最新无监督域自适应方法,研究人员提轻量CNN新架构OSNet
作者 | Kaiyang Zhou, Xiatian Zhu, Yongxin Yang, Andrea Cavallaro, and Tao Xiang 译者 | TroyChang 编辑 | Ja ...
- Windows优化大师的一点研究
以英文版v7.80.8.218来研究,这个应该是目前最新的公开发布的版本了. 安装程序是最新的Inno Setup 5.2.2制作的安装程序,Inno Setup是用Delphi 2编译的,因此与De ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- vw 前端_【前端适配】vw+rem自适应适配方案
先说好处:无需借助js,只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化. 再说用法: 第一步:元素大小单位选用rem. 第二步:根据设计稿的屏幕宽度设置html的font-size大 ...
- 对oracle静态参数修改一点研究
对静态参数修改的研究: 看参数能否被修改,什么时候生效看v$parameter的字段ISSES_MODIFIABLE.ISSYS_MODIFIABLE.ISMODIFIED. 关于alter syst ...
最新文章
- mysql高可用之MMM
- 人工智能还给我们留多少空间?
- 2019-05-23 IRIS嗅探器;用IRIS嗅探数据;
- Go 语言框架 Gin 练习2
- windows中wnmp设置nginx启动脚本
- Ajax入门总结--Ajax跨域请求
- SAP ABAP ALV list background render
- GenXus学习笔记——Transaction的建立
- 30行python代码设计_30行Python代码实现3D数据可视化
- 推荐 | Transformer最新成果!Learn to Dance with AIST++: Music Conditioned 3D Dance Generation!
- 回顾---对教师提出的5个问题的回答及个人感悟
- 揭秘《英雄联盟》的游戏自动化测试
- 斐讯n1卡在android,斐讯N1,看本地高清电影请务必刷coreelec
- windows10 快速切换网络适配器
- Microsoft Office Word 2007 转换为 Microsoft Office Word 2003兼容方法
- Scipy之图片降噪
- 1660 super安装tensorflow1.15
- 财阀还是民主?DeFi协议大战,暗潮汹涌
- Android 中触摸事件与点击事件分析
- XML 中的 xmlns 等属性的意义
热门文章
- cpu风扇声音大_小米游戏本风扇声音大的处理方法
- 【UVA1339】古老的密码(巧妙思路+(q)sort降序排列的三种方法)
- java实例 内存_一个分析和解决Java应用程序内存浪费的实战例子,值得收藏!
- pythom打包文件太大_PDF太大,不让上传怎么办?教你1分钟将100M的PDF变成10M
- 在Matplotlib图中插入LaTex公式
- 易筋SpringBoot 2.1 | 第一篇:构建第一个SpringBoot工程
- dcp9030cdn定影_兄弟DCP-9030CDN打印驱动下载|兄弟Brother DCP-9030CDN一体打印机驱动官方下载 - 维维软件园...
- 230.二叉搜索树中第K小的元素
- arm linux 删除大量文件,ARM Linux根文件系统(Root Filesystem)的制作
- 机器学习中的numpy的array_Python中机器学习的Numpy指南