您现在的位置是：网站首页> 编程资料编程资料

移动 web 端屏幕适配(rem)Html5移动端适配IphoneX等机型的方法rem适配移动设备的方法示例浅谈移动端适配大法详解如何使用image-set适配移动端高清屏图片详解H5 活动页之移动端 REM 布局适配方法html5实现移动端适配完美写法手机端用rem+scss做适配的详解移动端适配使px自动转换rem

2021-08-29 1229人已围观

简介这篇文章主要介绍了移动 web 端屏幕适配(rem)。详细的介绍了移动 web 端屏幕适配（rem），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：HTML中的<meta>标签的使用详解HTML常用meta大全(推荐)移动端专用的meta标签设置大全html中meta标签及用法详解HTML标签meta总结,HTML5 head meta 属性整理dreamweaver cs5不写写代码怎么添加meta标签?HTML5各种头部meta标签的功能(推荐)HTML中meta标签及Keywords

下一篇：HTML中实现鼠标经停时整行（tr）变色html5+canvas实现的会变色且会舞动的树动画特效源码html5实现的变色弹珠跳台阶游戏源码HTML5 canvas实现渐变色圆形进度条特效源码使用javascript和HTML5 Canvas画的四渐变色播放按钮效果html5教程实现Photoshop渐变色效果html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法