anyuan2002.com - vwin网

查找: 您的方位主页 > 网络频道 > 阅览资讯:REM——合适移动开发的自适应计划
vwin娱乐场

REM——合适移动开发的自适应计划

2019-03-30 22:33:11 来历:www.anyuan2002.com 【

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为单位。

 
 

本文地址:http://www.anyuan2002.com/a/question/100107.html
Tags: 移动 合适 rem
修改:vwin网
关于咱们 | 联络咱们 | 友情链接 | 188bet | Sitemap | App | 回来顶部