移动端使用rem布局-案例

我就是我 2022-10-11 00:41 224阅读 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 条评论，224人围观）

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

相关阅读

相关【第三部分 | 移动端开发】4：Rem布局

目录 | Rem布局简介 | 单位 rem | 媒体查询 | 根据不同的媒体引入不同的CSS | less基础概述与安装基础使用：创建less文件基础使用

今天药忘吃喽~/ 2023年09月23日 15:47/ 0 赞/ 121 阅读

相关移动端rem布局

rem布局（等比缩放布局） rem布局好处：不同设备下看起来比较协调。坏处：显示的内容并不会在大屏幕展示的内容多。 em : 是一个相对单位，1

分手后的思念是犯贱/ 2023年07月09日 13:29/ 0 赞/ 179 阅读

相关 vue使用rem来实现移动端自适应布局

现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介

缺乏、安全感/ 2023年06月19日 04:21/ 0 赞/ 137 阅读

相关 H5移动端—移动端布局及适配（rem）

1.rem适配原理首先清除一下默认样式，这个基本上所有写H5的都通用 a, input, button { -webkit-tap

比眉伴天荒/ 2023年06月09日 04:56/ 0 赞/ 24 阅读

相关移动端布局 rem

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

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

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

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

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

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

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

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

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

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

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

相关移动端布局之动态rem

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

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

相关 rem移动端课程表案例

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

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