前言

最近整理了一下以前学习前端的笔记，发现自己对移动 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. APP测试之-网址

    App测试那么多机型怎么搞? http://www.jianshu.com/p/1a9aa2cf0d85 移动App的分类 http://www.jianshu.com/p/01f5db8958d2 ...

  2. [CSP-S模拟测试]:biology（DP）

    题目传送门(内部题23) 输入格式 第一行有$2$个整数$n,m$.接下来有$n$行,每行$m$个整数,表示$a$数组.接下来有$n$行,每行$m$个整数,表示$b$数组. 输出格式 一行一个整数表示 ...

  3. 面试题：实现strcpy,strlen,strcmp,strcat,memcpy 之c-style字符串

    哪里可以看到c库函数的源码? gnu的c运行库glibc,但是源码的实现却是复杂的,需要考虑效率,stlen源码分析. c-style字符串有个约定,以空字符结尾,即 '\0' . ' }; &quo ...

  4. appium常见问题06_如何解决uiaotomator定位工具报错

    在使用uiaotomator工具定位元素过程中,经常会弹出报错,截图失败,导致无法定位元素,当遇到该问题时,解决办法如下: 方法一:拔掉手机usb连接,重新连接手机 方法二:adb杀掉手机服务,重起服 ...

  5. Egyptian Collegiate Programming Contest 2017 (ACM ECPC 2017) - original tests edition

    题目链接:https://codeforces.com/gym/101856 D. Dream Team 题意:n个点,让你连边成为一棵树,边权为顶点的GCD(u,v).求所有边权和的最大值. 思路: ...

  6. 从0开始的InfiniBand硬件踩坑过程

    由于科学计算实验的需求,需要使用InfiniBand做一个持久性内存全互联的分布式存储系统.其中从网卡到交换机使用Mellanox全家桶,而在Mellanox网卡与交换机的使用过程中还是遇到了不少的问 ...

  7. java.lang -> Boolean

    java.lang -> Boolean 是什么 Boolean 类是将 boolean 基本类型进行包装.类型为 Boolean 的对象包含一个单一属性 value,其类型为 boolean. ...

  8. Python - zipfile 乱码问题解决

    最近使用zipfile进行解包过程中遇到了很不舒服的问题,解包之后文件名是乱码的.下面进行简单总结: 首先,乱码肯定是因为解码方式不一样了,zipfile使用的是utf-8和cp437这两种编码方式, ...

  9. sciencedirect 网站抓取过程

      开发环境 C#+SQLite 软件使用教程: 设置页面 1.        首先录入需要查询的关键词,如果需要根据年去查询,可以勾选对应的年,支持多个年份查询.点击[设置关键字]按钮,把待查询关键 ...

  10. C#获取文件夹/文件的大小以及占用空间 转摘自：http://www.cnblogs.com/chenpeng-dota/articles/2176470.html

    C#获取文件夹/文件的大小以及占用空间 今天,头给了个任务:写个方法,我会给你个路径,计算这个路径所占用的磁盘空间 . 然后,找了很多资料.但大部分都是获取文件夹/文件的大小的.对于占用空间的没有成品 ...