关于如何计算rem
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于如何计算rem相关的知识,希望对你有一定的参考价值。
参考技术Arem是指根元素(root element html) 的字体大小 ,根元素默认的字体大小为16px。
rem是通过根元素进行适配的,网页中的根元素是html我们通过设置html的字体大小就可以控制rem的大小;
所以默认我们认为1rem=16px; 2rem=32px。
如果为了方便计算我们一般设置1rem=100px ,我们需要设置字体大小为100px
所以我们一般在js中做判断;:
如果是750的设计稿,但是手机是375的屏幕
对应的750设计稿 视觉测量值100px --> 1rem
375的设计稿 页面显示的就是50px --> 1rem
所以1rem和px的关系就是50倍的关系了: 屏幕/7.5 = 375/7.5=50px;
这样1rem*50=50px(50px是375屏幕上面的长度,相当于750上的100px);
==========================================================
如果是375的设计稿,手机屏幕也是375px的
对应375的设计稿 视觉稿测量值为100px ---> 1rem
375 屏幕手机 页面显示为100px --> 1rem
所以1rem*100 = 100px (100px是375屏幕上的长度,相当于350上的100px)
===========================================================
综上所述,对于750的设计稿,375的手机和设计稿是50%的关系所以设计稿上100px
对应375手机上的50px;也就是1rem对应着50px。
document.documentElement.style.fontSize = (a/7.5) * 1 + "px"。
对于375的设计稿,375设计稿和手机的100%的关系,所以设计稿上100px,对应这375手机上的50px,也就是50px;
document.documentElement.style.fontSize =(a/7.5) * 2 + \'px\'。
关于rem单位的理解和应用
理解:
- 是相对于Html中font-size字体大小的单位
- 比如font-size的大小为15px ,那么1rem = 15px
应用:
- 主要是被应用到对不同分辨率的屏幕的适配上,即不同大小的屏幕上显示合适大小的字体和宽高度等
那么,应该如何适配不同分辨率的手机呢?
适配方式:
-
- 媒体查询
- 媒体查询+rem
-
@media screen and (min-width: 360px) {html{font-size:19.2px;}} @media screen and (min-width: 375px) {html{font-size:20px;}} @media screen and (min-width: 400px) {html{font-size:21.33333px;}} @media screen and (min-width: 414px) {html{font-size:22.08px;}} @media screen and (min-width: 440px) {html{font-size:23.46666px;}} @media screen and (min-width: 480px) {html{font-size:25.6px;}} @media screen and (min-width: 520px) {html{font-size:27.73333px;}} @media screen and (min-width: 560px) {html{font-size:29.86666px;}} @media screen and (min-width: 600px) {html{font-size:32px;}} @media screen and (min-width: 640px) {html{font-size:34.13333px;}} @media screen and (min-width: 680px) {html{font-size:36.26666px;}} @media screen and (min-width: 720px) {html{font-size:38.4px;}} @media screen and (min-width: 750px) {html{font-size:40px;}} @media screen and (min-width: 760px) {html{font-size:40px;}} @media screen and (min-width: 800px) {html{font-size:40px;}} @media screen and (min-width: 960px) {html{font-size:40px;}}
- 利用js来动态的修改html中的font-size的大小 + rem
-
//视口设置 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) deviceWidth = 640; document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;
- 对于分辨率大于640px的屏幕,设备屏幕以640px来算; 6.4表示的是 我们假设以640px的屏幕作为基准,font-size的大小为100px ,那么 屏幕的整个宽度就是6.4rem (640px/100px = 6.4rem); 那么不同的屏幕下的font-size以6.4为基准来计算得出
-
- 淘宝js实现font-size+rem
-
var scale = 1 / devicePixelRatio; document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘); document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + ‘px‘
- 主要是将屏幕的大小分成了10份,font-size就是屏幕大小的十分之一。
-
- 媒体查询
https://blog.csdn.net/qq_34020571/article/details/78923089
以上是关于关于如何计算rem的主要内容,如果未能解决你的问题,请参考以下文章