3分钟读懂移动端rem使用方法(推荐)

2024-10-30 18:24:13

1、为什么要用rem

博客很久没写了，原因很简单。

最近接手了一个项目，要同时做PC和移动端的页面，之前没接触过，但毕竟给钱的是大爷，所以还是硬着头皮上了。

移动端最麻烦的是什么？

不同分辨率适配！

具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。

怎么办？

如果元素固定占用屏幕空间（一般是指宽度而非高度，下同）的百分之xx就ok了。

比如320px的10%是32px，640px的10%是64px，

如果10个10%宽度的元素放在一起，那肯定就是100%，即挤满屏幕（宽度），不会超出，也不会留白。

简单理解：
rem 就是指屏幕宽度的百分之x；
或者说，n个rem = 用户可视区域100%宽度

注意，之所以不说高度，是因为宽度（x轴）满了后，y轴（高度）方向的内容可以通过滚动屏幕来查看

上实例：

1、设计师给一个640px宽度的设计图，

2、你假定64rem=100%宽度（这里是640px），那么1rem=10px；

3、你照着写出了静态页面，然后按照1rem=10px的比例，将设计图上的元素的大小，全部用rem写下；

4、完美，你写的静态页面在640px宽度的页面上正常展示了；

5、A用户使用的是320px宽度的手机，因为你假设64rem=100%宽度，因此此时1rem=5px（320/64=5），于是也完美展示了；

2、rem怎么用？

rem是css单位；
1rem的大小是通过html下的font-size这个css属性告诉浏览器的；
使用替换px所在的位置即可
假定你预设在设计稿的时候 1rem = 10px;

然后一个元素（class=”ele”）的宽度是20px，高度30px（设计稿），

那么你的css这么写就可以了；

html {
  font-size: 10px;
}

.ele {
  width: 2rem;
  height 3rem;
}

3、在任何分辨率下都适用

发现问题在哪里了么？如何确认1rem等于多少px？

原因是rem是css中使用的单位，css是不会帮你计算1rem是多少px的，只能通过你自己来计算。

计算方式很简单，简单来说：

1、你有一个设计稿A（假定640px），有一个预设的rem和px的比例B（假如是1rem = 10px）

2、获取用户浏览器的可视区域的宽度C（假如是320px），那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知

3、原因是你假定屏幕可以容纳多少个rem，这是一个固定比例（如这里就是64rem）

1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

4、其他

1、用户加载完后，你就得设置好1rem的尺寸吧（记得是设置在html元素下的font-size）；

2、假如用户屏幕的尺寸会变，你肯定得考虑吧（刷新1）；

3、你懒得去找相应的代码，我总得给你吧（如下）；

var fun = function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;

      //这里是假设在640px宽度设计稿的情况下，1rem = 20px；
      //可以根据实际需要修改
      docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);

直接执行即可

以上所述是小编给大家介绍的rem使用方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue使用rem实现移动端屏幕适配

要想移动端适配并使用 rem 您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. postcss-pxtorem:转换px为rem的插件安装 postcss-pxtorem npm install postcss-pxtorem --save 新建rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前
详解Vue-cli webpack移动端自动化构建rem问题

相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题: 1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用 2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助 1 安装v
Js动态设置rem来实现移动端字体的自适应代码

下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do
基于vue-cli配置lib-flexible + rem实现移动端自适应

安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 bu
JS动态计算移动端rem的解决方案

在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !
基于rem的移动端响应式适配方案(详解)

视口在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
3分钟读懂移动端rem使用方法(推荐)

1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! 具体来说,有的屏幕320px宽,有的屏幕640px宽,有的更宽,如果你写固定px,那么要么小的放不下,要么大的有大片空白. 怎么办? 如果元素固定占用屏幕空间(一般是指宽度而非高度,下同)的百分之xx就ok了. 比如320px的10%是32px,640px的10%是64px, 如果10个10%宽度的
带你5分钟读懂MySQL字符集设置

一.内容概述在MySQL的使用过程中,了解字符集.字符序的概念,以及不同设置对数据存储.比较的影响非常重要.不少同学在日常工作中遇到的"乱码"问题,很有可能就是因为对字符集与字符序的理解不到位.设置错误造成的. 本文由浅入深,分别介绍了如下内容: 字符集.字符序的基本概念及联系 MySQL支持的字符集.字符序设置级,各设置级别之间的联系 server.database.table.column级字符集.字符序的查看及设置应该何时设置字符集.字符序二.字符集.字符序的概念与联系在
5 分钟读懂Python 中的 Hook 钩子函数

1. 什么是Hook 经常会听到钩子函数(hook function)这个概念,最近在看目标检测开源框架mmdetection,里面也出现大量Hook的编程方式,那到底什么是hook?hook的作用是什么? what is hook ?钩子hook,顾名思义,可以理解是一个挂钩,作用是有需要的时候挂一个东西上去.具体的解释是:钩子函数是把我们自己实现的hook函数在某一时刻挂接到目标挂载点上. hook函数的作用举个例子,hook的概念在windows桌面软件开发很常见,特别是各种事件触发的机
7分钟读懂Go的临时对象池pool以及其应用场景

临时对象池 pool 是啥? sync.Pool 给了一大段注释来说明 pool 是啥,我们看看这段都说了些什么. 临时对象池是一些可以分别存储和取出的临时对象. 池中的对象会在没有任何通知的情况下被移出(释放或者重新取出使用).如果 pool 中持有某个对象的唯一引用,则该对象很可能会被回收. Pool 在多 goroutine 使用环境中是安全的. Pool 是用来缓存已经申请了的目前未使用的接下来可能会使用的内存,以此缓解 GC 压力.使用它可以方便高效的构建线程安全的 free l
一文读懂JAVA中HttpURLConnection的用法

针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验做如下总结: 1:> URL请求的类别: 分为二类,GET与POST请求.二者的区别在于: a:) get请求可以获取静态页面,也可以把参数放在URL字串后面,传递给servlet, b:) post与get的不同之处在于post的参数不是放在URL字串里面,而是放在http请求的正文内. 2:>
一文读懂python Scrapy爬虫框架

Scrapy是什么? 先看官网上的说明,http://scrapy-chs.readthedocs.io/zh_CN/latest/intro/overview.html Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架.可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates Web Services ) 或者通用的网络爬虫. S
一文读懂modbus slave和modbus poll使用说明

modbus slave和modbus poll使用说明 1．使用环境: win7/win10 32/64位系统 Virtual Serial Port Driver 9.0 虚拟com端口工具 2.说明: 最近项目开发使用到了modbus协议,由于刚接触这个协议,在使用第三方工具进行调试的时候使用到了modbus poll和modbus slave工具,以下是简单的使用记录,希望以后对需要者有所帮助. 3.modbus poll和modbus slave是一款实用的modbus开发和调试工
一分钟搞懂Redis的慢查询日志操作

目录什么是慢查询? 什么是慢查询日志? 如何获取慢查询日志? 如何获取慢查询日志的长度? 如何清理慢查询日志? 怎么配置慢查询的参数? slowlog-log-slower-than slowlog-max-len 如何进行配置总结什么是慢查询? 慢查询,顾名思义就是比较慢的查询,但是究竟是哪里慢呢?首先,我们了解一下Redis命令执行的整个过程: 发送命令命令排队命令执行返回结果在慢查询的定义中,统计比较慢的时间段指的是命令执行这个步骤.没有慢查询,并不表示客户端没有超时问题,有
浅谈pc端rem字体设置的问题

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大. 3.当浏览器窗口变化时,内容的大小

3分钟读懂移动端rem使用方法(推荐)

相关推荐

随机推荐