前言

最近整理了一下以前学习前端的笔记，发现自己对移动 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. AngularJS ng-model 指令

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 代码示例如下: <!DOCTY ...

  2. 简记 jQuery 插件模板

    /** * @lisence jquery plugin demo v1.0.0 * * author: Jeremy Yu * * description: * this is a jquery p ...

  3. python中nonlocal 的作用域

    ''' nonlocal关键字用来在函数或其他作用域中使用外层(非全局)变量. ''' def work(): x = 0 def new_work(): nonlocal x x=x+3 retur ...

  4. php关键字static使用

    php中static关键字使用: 情景1:静态变量 使用static关键字定义静态变量 静态变量:只存在于函数作用域内,也就是说,静态变量只存活在栈中.一般的函数内变量在函数结束后会释放,比如局部变量 ...

  5. SoftDevice Specification v1.2

    S110 SoftDevice是蓝牙®低功耗(BLE)外设协议栈的解决方案.它集成了一个低 能量控制器和主机,并为建设蓝牙低功耗系统全面且灵活的API 芯片(SoC)解决方案. 本文件包含SoftDe ...

  6. 测开之路四十九：用Django实现扑克牌游戏

    用Django实现和之前flask一样的扑克牌游戏 项目结构 html <!DOCTYPE html><html lang="en"><head> ...

  7. 测开之路二十三：python常用模块

    os模块 sys模块 hashlib shutil对文件和目录进行操作 random和随机相关 json

  8. flysql 里两种传参的方式

    传参的方式,两个标清楚: for lists_bx_goods in out_list: sql = XDO().get_update_sql('init_goods_test', { "一 ...

  9. 【原创】复制知乎“禁止转载”的内容做笔记 - 基于oncopy监听器的简单解决方案

    原理:移除所有oncopy的监听器. 使用: 新建书签,地址设为: javascript: getEventListeners(document).copy.forEach(({listener}) ...

  10. [python面试题] 什么是单例，单例有什么用，业务场景是什么

    单例概念: 单例是一个特殊的类,这个类只能创建一次实例,例子如下: 1.a = Std(name='leo'), b = Std(name='jack'),两者的指向都是name=‘leo’的对象: ...