移动端rem的转换(750设计稿)

本文介绍了一种使用JavaScript实现页面自适应布局的方法,通过调整根元素的字体大小来确保不同屏幕尺寸下的一致显示效果。

js转换文件

    /*
    说明:100px=1rem
    */
    <script>
        + function() {
            remLayout();

            function remLayout() {
                var w = document.documentElement.clientWidth;
                w = w > 768 ? 768 : w;
                w = w <= 320 ? 320 : w;
                document.documentElement.style.fontSize = w / 7.5 + 'px';
            }
            window.addEventListener('resize', function() {
                remLayout();
            }, false);
        }();
    </script>

转载于:https://www.cnblogs.com/1666818961-lxj/p/9408250.html

<think>我们参考用户提供的引用内容,特别是引用[1][2][4]中关于rem布局的配置方法,来回答如何配置移动端使用rem实现响应式布局。 主要步骤包括: 1. 动态设置html根标签的font-size大小(通常通过JavaScript根据设备宽度计算) 2. 将设计稿中的px单位转换rem单位(通常使用一个基准值,比如设计稿宽度为750px,则设置font-size为75px,那么1rem=75px,这样设计稿上的元素尺寸除以75即可得到rem值) 3. 考虑添加最大最小宽度限制(可选) 4. 监听窗口大小变化,重新设置font-size 根据引用[2]和[4],我们可以总结出以下配置步骤: 步骤1:在HTML中设置视口标签 步骤2:引入一个JavaScript文件(或者内联脚本)来动态计算并设置html的font-size 步骤3:在CSS中使用rem单位,并注意字体大小等可能需要单独设置 步骤4:使用工具(如VSCode插件)辅助将设计稿px转换rem 下面详细说明: 步骤1:设置视口标签 在HTML的head中添加: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ``` 步骤2:动态设置html的font-size 我们可以写一个函数,根据设备的宽度来计算font-size,并设置给html元素。通常,我们以设计稿宽度(如750px)为基准,将设备宽度分成10等份(也可以其他份数,如7.5份,引用[4]中就是10等份),那么每份就是1rem。 例如,设计稿宽度750px,我们希望1rem=75px(这样10rem就是750px,即整个设备宽度),那么: font-size = 设备宽度 / 10 但是,引用[2]中使用了7.5份,即: font-size = 设备宽度 / 7.5 (这样在375px宽度的设备上,font-size=50px,那么设计稿上150px的元素就是150/75=2rem,而2rem在375px设备上就是2*50=100px,因为375px750px的一半,所以150px在375px设备上应该是75px?这里注意:设计稿750px,元素150px,在375px设备上应该显示75px。但按照这个公式,150px/75=2rem,而375px设备上1rem=375/7.5=50px,所以2rem=100px,这不对。所以需要调整。) 实际上,引用[4]中淘宝flexible.js的方案是将设备宽度分成10份,每一份用rem表示,即1rem=设备宽度的1/10。那么设计稿750px,设备宽度如果是750px,那么1rem=75px;如果设备宽度是375px,那么1rem=37.5px。那么设计稿上150px的元素,应该写成150/75=2rem,在375px设备上就是2*37.5=75px,正确。 所以,我们应该采用10等份,即: document.documentElement.style.fontSize = (document.documentElement.clientWidth / 10) + 'px'; 但是,引用[2]中使用了7.5,是因为他们希望1rem750px设计稿下等于100px(这样计算方便:设计稿上100px的元素就是1rem,200px就是2rem)。那么: 在750px设备上,font-size = 750/7.5 = 100px 在375px设备上,font-size = 375/7.5 = 50px 那么设计稿上150px的元素,应该写150/100=1.5rem,在375px设备上就是1.5*50=75px,正确。 所以,两种方式都可以,关键在于设计稿px值除以一个基准值(750px设计稿下,10等份基准为75,7.5等份基准为100)得到rem值。 我们以7.5等份(即基准100px)为例,因为计算时100作为除数比较方便。 步骤3:添加最大最小宽度限制(可选) 为了防止在大屏幕或过小屏幕上显示异常,可以设置最大最小宽度,如引用[2]中设置最大宽度750px,最小宽度320px。 步骤4:在CSS中,将设计稿上的px转换rem值。转换公式:rem值 = px值 / (设计稿宽度/等份数) 例如,设计稿宽度750px,采用7.5等份,则基准为100,那么200px的元素就是200/100=2rem。 步骤5:监听窗口大小变化,重新设置font-size。 根据引用[2]和[4],我们可以写出如下代码(内联或外部js文件): ```javascript function setRem() { // 获取设备宽度 var deviceWidth = document.documentElement.clientWidth || window.innerWidth; // 设置最大宽度(可选) if (deviceWidth >= 750) { deviceWidth = 750; } // 设置最小宽度(可选) if (deviceWidth <= 320) { deviceWidth = 320; } // 设计稿宽度750px,将设备宽度分成7.5份,每份100px(在750px设备上) document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'; // 设置body的字体大小,防止字体过大(可选,根据设计稿调整) document.querySelector('body').style.fontSize = 0.32 + 'rem'; // 相当于设计稿上32px(因为基准100,0.32rem=32px) } setRem(); // 初始化 window.onresize = setRem; // 窗口变化时重新设置 ``` 步骤6:使用工具辅助转换 在开发中,我们可以使用VSCode插件(如cssrem)来将px自动转换rem。在插件设置中,将基准font-size设置为100(因为设计稿750px,1rem=100px),这样写200px时,插件会自动转换为2rem。 注意:如果设计稿是375px宽(即2倍图,实际设备宽度为375px),那么我们可以将等份数调整为3.75份,这样在375px设备上,1rem=100px(375/3.75=100)。那么设计稿上的200px(实际在375px设备上应该是100px)应该写为200/100=2rem,在375px设备上就是2*100=200px?不对,因为设计稿是375px,元素200px,在375px设备上应该显示200px。但是按照这个计算,2rem=200px,正确。所以,设计稿宽度不同,等份数也不同。 总结: - 设计稿宽度750px(通常UI给的是750px的2倍图),则使用7.5等份,基准100px。 - 设计稿宽度375px(1倍图),则使用3.75等份,基准100px。 步骤7:在项目中引入 可以将上述setRem函数放在一个js文件中,然后在HTML中引入。或者直接在HTML的head中内联。 另外,引用[4]中提到使用淘宝的flexible.js,它是一个成熟的解决方案,可以直接引入使用。 完整示例: HTML部分: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>移动端rem布局</title> <script> // 直接内联脚本 function setRem() { var deviceWidth = document.documentElement.clientWidth || window.innerWidth; deviceWidth = deviceWidth > 750 ? 750 : deviceWidth; deviceWidth = deviceWidth < 320 ? 320 : deviceWidth; document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'; // 设置body的默认字体大小(可选) document.body.style.fontSize = '0.32rem'; } setRem(); window.onresize = setRem; </script> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 页面内容 --> </body> </html> ``` CSS部分(style.css): ```css /* 设计稿750px宽,元素宽度为750px(全屏)则写7.5rem */ .container { width: 7.5rem; /* 相当于750px */ margin: 0 auto; } .box { width: 3.75rem; /* 相当于设计稿375px */ height: 1rem; /* 相当于100px */ background: red; } ``` 注意:在CSS中,我们使用rem单位,并且通过除以基准值(100)得到rem值。 另外,引用[5]中提到了在vue3项目中的使用,思路类似,只是将设置rem的代码放在一个单独的js文件中,并在入口文件(如main.js)中引入。 最后,关于字体大小,我们可能不希望在小屏幕上字体过小,所以可以结合媒体查询单独设置,或者像上面代码中设置body的字体大小为0.32rem(即32px,在750px设备上,32px是正常大小,在375px设备上就是16px?不对,因为375px设备上1rem=50px,0.32rem=16px,这样字体大小会自适应。但注意,如果设计稿上字体是32px,那么0.32rem750px设备上是32px,在375px设备上是16px,是等比例缩放的,这样可能在小屏幕上字体过小。所以有时候字体不需要等比例缩放,可以使用媒体查询设置不同字体大小。 因此,对于字体,我们可以单独使用媒体查询设置不同的rem值,或者使用px单位(不推荐)或者使用vw单位(推荐)来确保可读性。 以上就是移动端使用rem实现响应式布局的配置方法。</think>### 移动端使用 rem 实现响应式布局的完整配置方案 根据引用内容[1][2][4][5],移动端使用 rem 实现响应式布局的核心是通过动态设置根字体大小,使页面元素按比例缩放。以下是具体配置步骤: --- #### 一、核心配置步骤 1. **设置视口标签**(HTML头部) 在`<head>`中添加视口配置,确保页面可缩放: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ``` 2. **动态计算根字体大小**(JavaScript) 创建`rem.js`文件,根据设备宽度动态设置`<html>`的`font-size`: ```javascript function setRem() { // 获取设备宽度(优先使用documentElement.clientWidth) const deviceWidth = document.documentElement.clientWidth || window.innerWidth; // 设置边界限制(可选) const maxWidth = 750; // 设计稿最大宽度 const minWidth = 320; // 最小宽度 const width = Math.min(Math.max(deviceWidth, minWidth), maxWidth); // 计算font-size(设计稿750px时,1rem = 100px) const remSize = width / 7.5; // 7.5 = 750/100 document.documentElement.style.fontSize = remSize + 'px'; } // 初始化 setRem(); // 监听窗口变化 window.addEventListener('resize', setRem); ``` 3. **引入JS文件**(HTML中) 在`</body>`前引入上述JS文件: ```html <script src="./utils/rem.js"></script> ``` 4. **CSS中使用rem单位** 设计稿元素尺寸转换rem公式: **`rem值 = 设计稿px值 / 基准值(100)`** ```css /* 设计稿中200px宽的元素 */ .box { width: 2rem; /* 200px / 100 = 2rem */ height: 1.5rem; /* 150px / 100 = 1.5rem */ } ``` --- #### 二、开发环境优化 1. **VS Code自动转换插件**(推荐) 安装`cssrem`插件(引用[4]): - 设置基准值:`100px`(对应750px设计稿) - 修改路径:VS Code设置 → 搜索`rootFontSize` → 修改为`100` 2. **框架集成示例**(Vue/React) ```javascript // Vue3 入口文件 main.js import './utils/rem.js' ``` --- #### 三、不同设计稿的基准值调整 | 设计稿宽度 | 基准值 | 计算公式 | 应用场景 | |------------|----------|------------------------|------------------| | 750px | 100px | `rem = px / 100` | 标准移动端设计稿 | | 375px | 50px | `rem = px / 50` | 2倍图适配 | | 1125px | 150px | `rem = px / 150` | 大屏设计稿 | **调整方法**:修改JS中的除数(`7.5`): ```javascript // 375px设计稿(2倍图)使用3.75 const remSize = deviceWidth / 3.75; ``` --- #### 四、注意事项 1. **字体大小处理** 建议单独设置`body`字体(避免过小): ```javascript // 在setRem()中添加 document.body.style.fontSize = '0.32rem'; // 约32px ``` 2. **1px边框问题** 使用`transform`解决高清屏边框过粗: ```css .border-1px { position: relative; &::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #000; transform: scaleY(0.5); } } ``` 3. **图片适配** 使用`max-width`确保不溢出: ```css img { max-width: 100%; height: auto; } ``` --- #### 五、备选方案对比 | 方案 | 优点 | 缺点 | 适用场景 | |---------------|--------------------------|--------------------------|------------------| | **纯rem** | 精确适配所有元素 | 需计算转换 | 移动端专有项目 | | **rem + vw** | 减少JS依赖 | 兼容性要求(IE9+) | 现代浏览器项目 | | **flexible.js**(引用[4]) | 淘宝成熟方案,自动处理 | 需引入第三方库 | 快速开发 | > 引用说明:动态计算根字体大小的方案参考了移动端适配的核心原理[^1][^2][^4],视口设置和单位转换方法来自实际开发经验总结[^4][^5]。 --- ### 常见问题解决方案 1. **PC和移动端混合适配**(引用[5]) 在JS中判断设备类型,应用不同基准值: ```javascript const isMobile = /(phone|pad|android)/i.test(navigator.userAgent); const baseSize = isMobile ? 100 : 144; // PC端基准144px ``` 2. **Retina屏幕适配** 使用`-webkit-min-device-pixel-ratio`媒体查询: ```css @media (-webkit-min-device-pixel-ratio: 2) { .logo { background-image: url(logo@2x.png); } } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值