前言

最近整理了一下以前学习前端的笔记，发现自己对移动 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. BottomNavigationBar 自定义 底部导航条

    在flutter中,BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数. BottomNav ...

  2. BZOJ 3772: 精神污染(dfs序+主席树)

    传送门 解题思路 比较神仙的一道题.首先计算答案时可以每条路径所包含的路径数,对于\(x,y\)这条路径,可以在\(x\)这处开个\(vector\)存\(y\),然后计算时只需要算这个路径上每个点的 ...

  3. CoffeeScript编写简单新闻页(仅UI)

    CoffeeScript编写简单新闻页(仅UI) 1. 配置(在公司搭建好的环境下配置) omnisocials-backend/src/backend/modules/member/config/m ...

  4. eclipse项目(java project)如何导入jar包的解决方案列表？

    右键项目-properties-java build path(左侧菜单)-选择libraries 有两种方式,导入jar包实际上就是建立一种链接,并不是copy式的导入 一.导入外部包,add ex ...

  5. Maven之自定义pom类型的基础项目

    摘要:在当前的软件开发场景中,大都是通过maven管理项目,而如果使用maven的话,其实也会有很多问题,比如项目中依赖的版本管理就是一个很头疼的事,如果一个项目中有很多人同时开发那么这就很可能造成大 ...

  6. Ubuntu安装 docker

    安装docker首先要需要一台宿主机, 我目前用VMvare下安装的Ubuntu16.04系统为宿主机,进行docker安装测试. ubuntu安装时选的中文环境,生成的sources.list里面的 ...

  7. row_number() over partition by 分组聚合

    分组聚合,就是先分组再排序,可以的话顺手标个排名:如果不想分组也可以排名:如果不想分组同时再去重排名也可以 ROW_NUMBER() OVER( [PARTITION BY column_1, col ...

  8. [Flask] 异步非阻塞IO实现

    Flask默认是不支持非阻塞IO的,表现为: 当 请求1未完成之前,请求2是需要等待处理状态,效率非常低. 在flask中非阻塞实现可以由2种: 启用flask多线程机制 # Flask from f ...

  9. 小程序报错 Please do not register multiple Pages in undefined.js

    在pages下面建了一个新页面的文件夹,但是没有在page.json里面注册,所以报了这个bug,注册一下就行了.

  10. git使用记录六：对commit的message做处理

    修改最新commit的message git commit --amend 修改老旧commit的message 查询最新的三个log soaeon@DESKTOP-FUJJTHR MINGW64 / ...