移动 web 端屏幕适配 - rem

Xufc 发布于2019-08-22 18:15 / 1287人阅读

摘要：前言最近整理了一下以前学习前端的笔记，发现自己对移动端屏幕适配这一块并没有真正理解，只是会用。接下来，把自己的一些对移动端屏幕适配的思考记录下来。量得的高度为，因为在设计稿这样尺寸的屏幕中，，所以该的的值为，即。

前言

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

rem 介绍

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

rem 适配移动 web 端 适配效果

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

代码

// 在 html 文件的 head 标签中

// 在 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。

云服务器 GPU云服务器移动端适配移动端适配方案移动端适配 js 移动端web

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95672.html

移动 web 端屏幕适配 - rem

摘要：前言最近整理了一下以前学习前端的笔记，发现自己对移动端屏幕适配这一块并没有真正理解，只是会用。接下来，把自己的一些对移动端屏幕适配的思考记录下来。量得的高度为，因为在设计稿这样尺寸的屏幕中，，所以该的的值为，即。前言最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配（rem）这一块并没有真正理解，只是会用。接下来，把自己的一些对移动 web 端屏幕适配（rem）的...

RdouTyping 2019-08-02 10:45 评论0 收藏0
移动 web 端屏幕适配 - rem

摘要：前言最近整理了一下以前学习前端的笔记，发现自己对移动端屏幕适配这一块并没有真正理解，只是会用。接下来，把自己的一些对移动端屏幕适配的思考记录下来。量得的高度为，因为在设计稿这样尺寸的屏幕中，，所以该的的值为，即。前言最近整理了一下以前学习前端的笔记，发现自己对移动 web 端屏幕适配（rem）这一块并没有真正理解，只是会用。接下来，把自己的一些对移动 web 端屏幕适配（rem）的...

Sanchi 2019-08-30 15:53 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

pepperwang 2019-08-20 12:14 评论0 收藏0