前端页面适配的rem换算

为什么要使用rem


之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。

例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。

但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。

Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好,可以放心使用。

通用换算和一些坑


有时我们会看到有些使用rem的页面里会先给页面根元素一个样式:

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

为什么是62.5%?

大多数浏览器的默认字号是16px,因此1rem=16px,这样不方便我们px和rem的换算,假设1rem=10px,那么100px=10rem,25px=0.25rem。这样就好换算很多,于是就有了上面的10/16。

如果是640的设计稿,需要除以2转化为和iphone5屏幕等宽的320。所以设计稿px单位/2/10转为rem。之后再媒体查询设置每个屏幕大小的font-size百分比,页面会根据上面设置的根font-size适配。

看到这里是不是觉得一切很完美?然而,这里面有两个深坑:

1.我看了网上很多关于rem的资料,基本都说浏览器的默认字号就是16px,然后直接定义font-size:62.5%。但是,rem属于css3的属性,有些浏览器的早期版本和一些国内浏览器的默认字号并不是16px,那么上面的10/16换算就不成立,直接给html定义font-size: 62.5%不成立。

2.chrome强制字体最小值为12px,低于12px按12px处理,那上面的1rem=10px就变成1rem=12px,出现偏差(下面给demo)。

解决方案: 将1rem=10px换为1rem=100px(或者其它容易换算的比例值);不要在pc端使用rem。

那么上面的页面根元素样式要改为:

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

再用本工厂总结得出的各分辨率媒体查询换算:

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){html { font-size: 843.75%; }
}

至此,坑填完。设计稿px换算/2/100即可得到rem值。

更精准健壮的换算


然而,上面的625%大法除了有兼容性问题,也无法很好地根据不同设计稿精准适配,不是我们的最佳选择。网易和淘宝分别有自己的一套适配方法,适配性也很完美。

  • 网易手机端:图1图2图3基准值: 可以看到,无论页面以哪种手机比例缩放,body的width都是7.5rem。很明显,目前网易的手机端设计稿是基于iPhone6,750(设计师给的设计稿是物理分辨率,会是我们写样式的逻辑分辨率的两倍,如果给的设计稿是640,那么是基于iPhone5,320),且基准值是100px(750/7.5=100)。这个基准值很关键,后面的css换算,都和这个基准值有关。动态font-size: 我们看到图1、图2、图3的font-size都有根据屏幕大小而动态改变,可以推算出公式:

    屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)

    获取到这个值,再赋给html元素的style:

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5   'px';
    

    这样就设置好了每个页面的根fonts-size,因为rem单位是基于根font-size,因此只要确定一种设计稿对应手机的换算,其余屏幕尺寸均可自动适配。

    上面我们得出设计稿换算rem的基准值是100,因此只需要把设计稿上的px值除以100即为我们要的rem值。

    > Px/100=rem,所以100px=1rem,25px=0.25rem
    
  • 淘宝手机端:  大名鼎鼎的Flexible

    资料引用

    大漠:使用Flexible实现手淘H5页面的终端适配

    齐神:flexible解读及应用

     

    很多大神包括我们公司同事都有对此适配方案做了解析,所以我这边简单综述:

    引入: 直接引用阿里的CDN文件(或下载到本地引入)

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    

    设定: 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

    换算: 假设拿到的设计稿和上述网易的一样都是750,Flexible会把设计稿分为10份,可以理解为页面width=10rem,即1rem=75px,所以根font-size(基准值)=75px。

    之后的css换算rem公式为:

px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem

换算工具


显然,可以看出px与rem的换算因为基准值的不同而有些复杂,甚至需要借助计算器的辅助。在这里推荐一个换算神器:cssrem

安装好之后,做一些设置

px_to_rem - px转rem的单位比例,假设拿到设计稿750,基准值是75,此处就设75

max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。

available_file_types - 启用此插件的文件类型。[".css", ".less", ".sass", ".scss"]。插件设置详细

上述三种换算方案的步骤和优劣


  • 通用方案

1、设置根font-size:625%(或其它自定的值,但换算规则1rem不能小于12px)

2、通过媒体查询分别设置每个屏幕的根font-size

3、css直接除以2再除以100即可换算为rem。

优:有一定适用性,换算也较为简单。

劣:有兼容性的坑,对不同手机适配不是非常精准;需要设置多个媒体查询来适应不同手机,单某款手机尺寸不在设置范围之内,会导致无法适配。

  • 网易方案

1、拿到设计稿除以100,得到宽度rem值

2、通过给html的style设置font-size,把1里面得到的宽度rem值代入x  document.documentElement.style.fontSize = document.documentElement.clientWidth / x 'px';

3、设计稿px/100即可换算为rem

优:通过动态根font-size来做适配,基本无兼容性问题,适配较为精准,换算简便。

劣:无viewport缩放,且针对iPhone的Retina屏没有做适配,导致对一些手机的适配不是很到位。

  • 手淘方案

1、拿到设计稿除以10,得到font-size基准值

2、引入flexible

3、不要设置meta的viewport缩放值

4、设计稿px/ font-size基准值,即可换算为rem

优:通过动态根font-size、viewpor、dpr来做适配,无兼容性问题,适配精准。

劣:需要根据设计稿进行基准值换算,在不使用sublime text编辑器插件开发时,单位计算复杂。

Demo


下面看看demo

设计稿:基于iPhone5,宽度640。

那么在开发模式,iphone5是320,所有数值均是设计稿一半大小。

期望效果:在iPhone5中,box1宽高50px,box2宽高125px,字体15px。其他屏幕终端自动适配。

demo-psd

1、62.5%方案

可以看出,基于chrome iPhone5的调试,box1宽高是60,box2宽高是150。出现了误差,就是上文提到字号最小值强制12px的原因。

2、625%方案

比例正常。

3、网易方案

比例正常。

4、手淘方案

比例正常(Retina屏做了缩放)。

到底用哪种换算方案呢?


每个人评判的标准不同。但个人更倾向flexible,动态计算viewport和针对iphone手机的dpr缩放使得页面适配更加精确,而且手淘页面用户访问量比网易页面大很多。

移动端有用px的时候吗?


有。当你的页面图片或者某一元素比例要固定,不想进行任何缩放时,rem就不适合了,这时候用px单位,能保证该元素不会因缩放而失真模糊。

总结


纸上得来终觉浅,绝知此事要躬行。

各种终端适配一直是前端头疼的点,自己之前做的适配大多只是了解个大概就直接使用,没有去研究透。这次刚好接了公司的前端公会任务,【了解rem的换算方法】。原本以为是个比较简单的任务,但却着实花了不少时间,经常遇到某个点没想透进而去查资料写demo。一路下来,文章基本完成,自己之前疑惑的点也明了不少。抛砖引玉,文章有什么错漏或者新观点希望前端小伙伴们能提出,共同学习。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368648.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

lt form gt 在html,HTML lt;formgt; 标签的 accept

HTML <form> 标签的 accept2018-11-20在跨业务、跨网站发送数据或者业务升级的时候&#xff0c;我们有的时候需要指定发送数据的编码方式&#xff0c;比如页面表单的编码是UTF-8的&#xff0c;而提交到目标页面的编码是GBK编码时&#xff0c;会用到表单的accept-charset属…

使用Java ThreadLocals的意外递归保护

对于那些使用第三方工具来尝试扩展它们而又不完全了解它们的人来说&#xff0c;这是一个小技巧。 假定以下情况&#xff1a; 您想扩展一个公开分层数据模型的库&#xff08;假设您要扩展Apache Jackrabbit &#xff09; 该库在访问内容存储库的任何节点之前会内部检查访问权限…

今日头条竞价接口转发

一、代码 ①类名 public class TouTiao{public class model{public string site_id { get; set; }public string ad_id { get; set; }public List<Data> data { get; set; }}public class Data{public string label { get; set; }public string lable { get; set; }publi…

art-template辅助函数和子模板

art-template 前端使用 用途&#xff1a;主要用来处理数据和优化性能&#xff0c;与其他的一些模块化处理数据的插件相比&#xff0c;art-template处理性能好 不废话&#xff0c;上代码 1.art-template基本语法使用 <script src"template.js"></script&…

微处理器 微型计算机系统,作业答案11微处理器微型计算机和微型计算机系统三者之间.DOC...

作业答案11微处理器微型计算机和微型计算机系统三者之间第1章 作 业 答案1.1 微处理器、微型计算机和微型计算机系统三者之间有什么不同?把CPU(运算器和控制器)用大规模集成电路技术做在一个芯片上,即为微处理器。微处理器加上一定数量的存储器和外部设备(或外部设备的接口)构…

C# 对轻量级(IoC Container)依赖注入Unity的使用

概述 Unity是一个轻量级的可扩展的依赖注入容器&#xff0c;支持构造函数&#xff0c;属性和方法调用注入。Unity可以处理那些从事基于组件的软件工程的开发人员所面对的问题。构建一个成功应用程序的关键是实现非常松散的耦合设计。松散耦合的应用程序更灵活&#xff0c;更易于…

为什么同步的StringBuffer从来都不是一个好主意

介绍 StringBuffer是用于可变字符串的同步类。 使其同步的主要问题是 它通常用作局部变量&#xff0c;因此使其同步只会使其变慢。 以多线程方式使用它从来不是一个好主意。 这个问题是开发人员认为使用StringBuffer的方法在不使用时本身就是线程安全的。 StringBuffer的问题…

大工20秋计算机组成原理在线作业2,大工14秋《计算机组成原理》在线作业2答案...

大工14秋《计算机组成原理》在线作业2单选题 判断题一、单选题(共 10 道试题&#xff0c;共 50 分。)1. 存储周期是指( )。A. 存储器的读出时间B. 存储器的写入时间C. 存储器进行连续读或写操作所允许的最短时间间隔D. 存储器进行连续读或写操作所允许的最长时间间隔正确答案&a…

css清除浮动

css设计浮动属性的主要目的&#xff0c;是为了实现文本绕排图片的效果。 一.浮动 当浮动一张图片或者其他元素时&#xff0c;浏览器会将浮动元素往上方推&#xff0c;直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了&#xff0c;因为它就会占…

gitlab搭建配置;ssh配置;

1.centos7上搭建gitlab&#xff0c;过程略&#xff1b; 命令&#xff1a;gitlab-ctl [start] [stop] [restart] [reconfigure] [tail] 查看gtilab日志 [status] 查看gitlab运行状态信息 2.修改默认ip端口&#xff1a; vim /etc/gitlab/gitlab.rb &#xff1b; external_url h…

5月学习总结(Ant-Design,mustache,require.js,grunt)

一、Ant-Design学习 因为Ant-Design是基于React实现的&#xff0c;之前自己也学过一段时间的React&#xff0c;对React还是相对比较熟悉的&#xff0c;在学习Ant-Design也还不算吃力。 最开始是从源码看起&#xff0c;从最简单的Icon组件看的&#xff0c;然后连续看了几个组件就…

使用NoSQLUnit测试Spring Data Neo4j应用程序

Spring Data Neo4j是Spring Data项目中的项目&#xff0c;它提供了Spring编程模型的扩展&#xff0c;用于编写使用Neo4j作为图形数据库的应用程序。 要使用NoSQLUnit为Spring Data Neo4j应用程序编写测试&#xff0c;除了考虑Spring Data Neo4j在图形节点和关系中使用一种称为t…

家用计算机历史记录,教您如何查看电脑使用记录

很多朋友想查看自己之前使用过的文件或者文档来查询资料&#xff0c;或者是想看电脑是否被人使用过&#xff0c;但是&#xff0c;如何查看电脑使用记录呢&#xff1f;下面系统之家小编教大家查看电脑使用记录小技巧&#xff0c;不用担心找不到电脑使用记录。希望对大家有所帮助…

html5 图片上传 预览

<html><body><fieldset> <legend>测试</legend> <div class"form-group"> <div class"img-preview rl"> <form id"index_form1" name"index_form1" role"form" method"p…

使用selenium前学习HTML(3)— 属性

<!--HTML标签可以拥有属性&#xff0c;属性提供元素的更多的信息&#xff1b;属性总是以名称/值对的形式出现&#xff0c;比如&#xff1a;name"value"。属性总是在 HTML 元素的开始标签中规定。 --><!DOCTYPE html> <html lang"en"> &l…

k3 Bos开发百问百答

K/3 BOS开发百问百答 &#xff08;版本&#xff1a;V1.1&#xff09; K3产品市场部 目录 一、基础资料篇__ 1 【摘要】bos基础资料的显示问题_ 1 【摘要】单据自定义无法看到bos定义的基础资料_ 1 【摘要】在调出基础资料序时簿时&#xff0c;过滤出我需要的基础资料_ 1 【摘要…

计算机架构专业排名,全国大学计算机专业排名(转贴)

4 东北大学 A 081201计算机系统结构 081200计算机科学与技术 08工学5 西安交通大学 A 081201计算机系统结构 081200计算机科学与技术08工学6 复旦大学 A 081201计算机系统结构 081200计算机科学与技术 08工学7 中国科学技术大学 A 081201计算机系统结构 081200计算机科学与技术…

Spring MVC,Ajax和JSON第2部分–服务器端代码

在上一个博客中&#xff0c;我说过我将谈论Spring&#xff0c;Ajax和JSON&#xff0c;但是没有。 原因是我想使用&#xff08;很少&#xff09;可信的购物网站场景来设置场景。 在这种情况下&#xff0c;当用户单击“电子商务”页面链接时&#xff0c;服务器应用程序将加载目录…

Python模块学习之解决selenium的“can't access dead object”错误

问题描述 在python执行过程中&#xff0c;提示selenium.common.exceptions.WebDriverException: Message: TypeError: cant access dead object 原因 原因是代码中用到了frame,获取元素前需要切换到frame才能定位到元素&#xff0c;否则无法定位到元素 解决方法 在查找元素前加…

初中生学计算机网络应用怎么样,初中生读计算机网络技术专业怎么样?小编解答...

初中生读计算机网络技术专业怎么样?可以这样说&#xff0c;计算机网络技术专业在众多专业当中来说&#xff0c;也是一个发展得比较不错的专业&#xff0c;而且现在也有很多高职学校都开设有计算机网络技术专业&#xff0c;那么初中生读计算机网络技术专业怎么样?计算机网络技…