前言

最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配（rem）这一块并没有真正理解，只是会用。
接下来，把自己的一些对移动 web 端屏幕适配（rem）的思考记录下来。

rem 介绍

rem 表示根元素（<html>）的 font-size 的大小。即如果根元素的 font-size 大小为 14px，则 1rem = 14px

rem 适配移动 web 端

适配效果

在不同尺寸的屏幕下，同一个元素的大小看起来不是一样大的，但是它们所占屏幕宽度的比例是一样的。

代码

// 在 html 文件的 head 标签中

<script type="text/javascript">

  (function(){

    var html = document.documentElement;

    // 获取屏幕宽度（px）

    var hWidth = html.getBoundingClientRect().width;

    // 设置 html 标签的 font-size 大小为 hWidth/15

    html.style.fontSize = hWidth/15 + 'px';

  })()

</script>


// 在 less 中

/* 定义变量@r：750/15 */

@r:50rem;

div {

  width: 100/@r;

  height: 200/@r;

}

javascript 代码

首先，我们将屏幕的 1/15 大小（px）复制给 html 标签的 font-size 属性。此时，在任何尺寸的屏幕上，屏幕尺寸（px）的 1/15 px 都等于 1rem 的大小。即：在任何尺寸的屏幕上，只要给元素设置值相同的 rem，则在所有尺寸的屏幕上该元素所占屏幕宽度的比例是一样的，所占比例一样，就适配了所有尺寸的屏幕。

less 代码

现在只需要将设计稿中元素的 px 单位转换为 rem 单位。

所以，这个时候，我们可以把设计稿也当成一个具有一定尺寸的手机屏幕。
在我这个例子中，设计稿的宽度为 750px。

所以，750/15 = 50px，即在设计稿这样尺寸的手机屏幕中，1rem = 50px。

然后，在 less 代码中，我们定义一个变量 @r。
量得 div 的宽度为 100px，因为在设计稿这样尺寸的屏幕中，1rem = 50px，所以该 div 的 rem 的值为：100/50 rem，即 100/@r。
量得 div 的高度为 200px，因为在设计稿这样尺寸的屏幕中，1rem = 50px，所以该 div 的 rem 的值为：200/50 rem，即 200/@r。

移动 web 端屏幕适配 - rem的更多相关文章

  1. Web 端屏幕适配方案

    基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...

  2. 移动端屏幕适配(rem+js）

    什么是移动端适配 在制作webapp时,一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样. 也就是说用同一套代码在不同分辨率的手机上跑时,页面元素间的间距.留白,以及 ...

  3. h5移动端屏幕适配

    1.rem <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. web端网页适配移动端注意事项，以及遇到的问题

    1.一定要加上 <!-- name=“viewport” 指视口 width=device-width 宽度等于视口宽 initial-scale=1.0 像素比例 maximum-scale= ...

  5. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

  6. vue 移动端屏幕适配 使用rem

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. po ...

  7. CSS 关于屏幕适配REM

    这里不多说了,想详细了解的可以参考 2350305682 的博客 https://www.cnblogs.com/annie211/p/8118857.html 不想多深究,想先实现的看这(移动端): ...

  8. vue 移动端屏幕适配

    https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md基本配置 // eslint-disable-next ...

  9. 移动端font-size适配方案

    概述 这是我研究移动端页面时的思考,记录下来供以后开发时参考,相信对其他人也有用.由于我写移动端页面写的还比较少,一些问题都还没遇到,所以我的这篇博文不免有些错误的地方,还请大佬多多指正. 这篇文章是 ...

随机推荐

  1. vue中img图片加载中以及加载失败显示默认图片问题

    加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...

  2. delphi 使用 InputBox、InputQuery 的启发

    使用 InputBox.InputQuery 的启发 看了 InputBox.InputQuery 函数实现的源码, 有些收获与心得... ------------------------------ ...

  3. BZOJ 1818: [Cqoi2010]内部白点(树状数组)

    传送门 解题思路 首先一定不可能有\(-1\)的情况,因为新产生的黑点不会造成任何贡献,它的各个方面都是不优的.那么只需要统计一遍答案,首先要将横坐标相同的两个点看成一条竖线,纵坐标相同的点看成一条横 ...

  4. [CSP-S模拟测试]:kill（二分答案+贪心）

    题目传送门(内部题50) 输入格式 第一行包含四个整数$n,m,s$,表示人数.怪物数及任务交付点的位置.第二行包含$n$个整数$p_1,p_2,...,p_n$.第三行包含$n$个整数$q_1,q_ ...

  5. 几乎相同的 deal.jsp 代码（index.jsp不变），在IDEA相同项目运行，结果却不一样，实在想不出来

    目录 主要问题 主要项目 index.jsp: deal.jsp(正确可运行): deal.jsp(错误不可运行): 错误的代码运行图片: 可运行的代码运行图片 主要问题 几乎相同的 deal.jsp ...

  6. delphi xe2 panel 无法 遮盖 label 的 解决方案。

    百度  没有找到此答案.  问群,也没答案. 根据群友的提示. 找到的解决的办法. 很简单. ParentBackground 设置为 false.

  7. Markdown ![...](...) --> <img ... />

    search \!\[(\w+)\]\(([a-zA-Z0-9/.]+)\) replace <img src="$2" width="30%"/>

  8. Unity获取Android和iOS手机系统电量及网络状况

    最开始考虑使用中间静态链接库来调用手机系统自带的API,但是在研究的过程中发现Android系统将电量等信息记录在了固定的文件中,所以只需要在C#中直接读取就可以而不需要中间库. a.Android版 ...

  9. 如何用javascript中的canvas让图片自己旋转

    最近在写一个游戏,想让一个人物随着鼠标在原地旋转 在网上找了找,大都是用css写的,但是我为了长远的利益着想选择使用javascript代码中的canvas来解决绘图问题 其中重要的两个方法: con ...

  10. poj3468 A Simple Problem with Integers （树状数组做法）

    题目传送门 A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 1 ...