移动端使用rem布局-案例

我就是我 2022-10-11 00:41 199阅读 0赞

在页面引入这段**js**代码

(function (doc, win) {
           var docEl = doc.documentElement,
               resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
               recalc = function () {
                   var clientWidth = docEl.clientWidth;
                   if (!clientWidth) return;
                   if(clientWidth>=640){
                       docEl.style.fontSize = '100px';
                   }else{
                       docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                   }
               };
     
           if (!doc.addEventListener) return;
           win.addEventListener(resizeEvt, recalc, false);
           doc.addEventListener('DOMContentLoaded', recalc, false);
       })(document, window);

### 如何使用 ###

> 这是rem布局的核心代码，这段代码的大意是：  
> **如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 \* (当前页面宽度 / 640)**

**为什么设置640px**

> 设计图一般是640px的，这样相当于100px = 1rem，可以方便计算；
> 
> 因为是640px所以应限制下页面的大小，所以最外层的盒子应该是

position: relative;
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 163 阅读

相关移动web开发布局模式（单独制作移动端界面二）之媒体响应与rem布局

移动web开发布局模式（单独制作移动端界面二）之媒体响应与rem布局单独制作移动端界面布局方式（媒体响应与rem布局） 1. rem基础

阳光穿透心脏的1/2处/ 2023年02月10日 12:28/ 0 赞/ 158 阅读

相关移动端布局 rem

移动端布局 rem rem定义 1、rem相对于 html元素字体大小来说的 2、rem的有点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以

曾经终败给现在/ 2022年11月19日 09:47/ 0 赞/ 261 阅读

相关 rem 处理,可以使用到移动端

处理如下 // 设计图 y = 750 比例 x=100;1rem =100px; var html = document.getElem

ゞ浴缸里的玫瑰/ 2022年10月25日 15:29/ 0 赞/ 128 阅读

相关移动端使用rem布局-案例

在页面引入这段js代码 (function (doc, win) { var docEl = doc.documentElement,

我就是我/ 2022年10月11日 00:41/ 0 赞/ 199 阅读

相关移动端（手机）自适应rem布局

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web a

淩亂°似流年/ 2022年07月16日 02:10/ 0 赞/ 287 阅读

相关移动端rem怎么用?

简单说明下，一般字体有4种，px,pt,em,rem,这里简单介绍两个px和rem。 ![Center][] ![Center 1][] 感觉菜鸟教

男娘i/ 2022年06月04日 08:17/ 0 赞/ 251 阅读

相关【移动端适配方案二弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）

前端开发工程师根据UI设计师给的设计稿进行开发。为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS 实现如下： 1、设置width=devi

电玩女神/ 2022年05月21日 00:08/ 0 赞/ 393 阅读

相关移动端布局之动态rem

动态rem 1. 首先我们先介绍当下的长度单位 `px` 像素 `em` 一个M的宽度 / 一个汉字的宽度 1em == 自身的`font-size` `rem

本是古典何须时尚/ 2022年01月20日 07:27/ 0 赞/ 341 阅读

相关 rem移动端课程表案例

<html> <head> <meta charset="utf-8"> <meta name='viewport' content='wi

野性酷女/ 2021年07月24日 15:20/ 0 赞/ 449 阅读