根据iPhone6设计稿动态计算rem值

心已赠人 2022-08-18 02:48 156阅读 0赞

`rem` 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的更节点添加`font-size` 值。使用`mediaquery` 可以解决这个问题，但是每一个文件都引用一大串的`font-size` 值很繁琐，而且值也不能达到连续的效果。

就使用js动态计算给文档的`fopnt-size` 动态赋值解决问题。

**使用的时候，请将下面的代码放到页面的顶部（head标签内）；**

/** * [以iPhone6的设计稿为例js动态设置文档 rem 值] * @param {[type]} currClientWidth [当前客户端的宽度] * @param {[type]} fontValue [计算后的 fontvalue值] * @return {[type]} [description] */
    <script>
        var currClientWidth, fontValue,originWidth;
        //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿）
        originWidth=375;
        __resize();
    
        //注册 resize事件
        window.addEventListener('resize', __resize, false);
    
        function __resize() {
            currClientWidth = document.documentElement.clientWidth;
            //这里是设置屏幕的最大和最小值时候给一个默认值
            if (currClientWidth > 640) currClientWidth = 640;
            if (currClientWidth < 320) currClientWidth = 320;
            //
            fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
            document.documentElement.style.fontSize = fontValue + '%';
        }
        </script>

发表评论取消回复

表情：

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

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

相关阅读

相关设计稿常见尺寸宽度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

àì夳堔傛蜴生んèń/ 2023年01月11日 09:12/ 0 赞/ 168 阅读

相关 rem 针对设计稿宽度，设计rem调试比例

rem 针对设计稿宽度，设计rem调试比例一, 网易适配方法 > 屏幕宽度/设计稿rem宽度=页面动态font-size值 (function(do

淩亂°似流年/ 2023年01月06日 13:59/ 0 赞/ 200 阅读

相关关于rem支队设计稿宽度，设计rem调式比例

css3规定：1rem的大小就是根元素html的font-size的值通过设置根元素html的font-size的大小，来控制整个html文档内的字体大小，元素宽高，内

电玩女神/ 2023年01月06日 13:59/ 0 赞/ 153 阅读

相关怎么根据甲方设计稿设置Rem比例？

一、什么是rem？ rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们前端常说的适配单位rem。因为rem的

Myth丶恋晨/ 2022年12月27日 04:45/ 0 赞/ 153 阅读

相关最新rem适配H5 750设计稿代码

最新rem适配H5 750设计稿代码，比较严谨，项目中可直接使用，很简单方便 <script> //简单版 // functi

布满荆棘的人生/ 2022年11月20日 01:51/ 0 赞/ 183 阅读

相关 uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）

最近项目中需要高频度使用单位像素换算，以适配不同屏幕大小的需求，这里我以蓝湖为例，下面我给出换算步骤： 1、把蓝湖设计稿选到 ios 端，这时候页面单位变成了pt，因为我们i

清疚/ 2022年10月10日 01:34/ 0 赞/ 416 阅读

相关设计稿750px 配置rem

设计稿750px 配置rem > 获取设备宽度 > >750 等于750 > <320 等于320 > 设置字体大小设备宽度/7.5 1rem=100像素

桃扇骨/ 2022年08月29日 09:38/ 0 赞/ 274 阅读

相关根据iPhone6设计稿动态计算rem值

`rem` 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的更节点添加`font-size` 值。使用`mediaquery` 可以

心已赠人/ 2022年08月18日 02:48/ 0 赞/ 157 阅读

相关 JS动态计算移动端rem的解决方案

首先介绍下rem 说起rem就的说px，em； PX为单位在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，

蔚落/ 2022年04月23日 16:20/ 0 赞/ 202 阅读

相关 js动态计算移动端rem适配问题

-------------------- title: js动态计算移动端rem适配问题 date: 2017-04-20 14:33:37 tags: re

向右看齐/ 2022年03月15日 06:58/ 0 赞/ 334 阅读