移动端项目设配UI设计图方法

骑猪看日落 2023-07-25 09:24 11阅读 0赞

由于要使用UI的设计图，所以需要根据UI设定的尺寸来写页面

下面是移动端适配的方法

在script标签中执行

<script>
            (function (doc, win) {
                var docEl = doc.documentElement,
                    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                    dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                    dpr = 1,
                    scale = 1 / dpr,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
                docEl.dataset.dpr = dpr;
                var metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
                docEl.firstElementChild.appendChild(metaEl);
                var recalc = function () {
                    var width = docEl.clientWidth;
                    if (width / dpr > 375) {
                        width = 375 * dpr;
                    }
                    // 乘以100，px : rem = 100 : 1
                    docEl.style.fontSize = 100 * (width / 375) + 'px';
                };
                recalc()
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
            })(document, window);
    	</script>

![2020041409175155.png][]

其中这里的375是根据UI给你宽度尺寸来定。要根据需要修改

其次meta标签也要修改

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

最后根据UI给的大小单位px。除以100后得到的数字+rem就是移动端设配的方法

[2020041409175155.png]: /images/20230528/a5f2e30f2e794e03b0db9bc54cf4d8a6.png

发表评论取消回复

表情：

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

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

相关阅读

相关移动端适配

@charset "utf-8"; /* 涉及到的H5新标签，之后课程做介绍 */ html{ color:000;/*默认字体颜色黑色*...

本是古典何须时尚/ 2024年04月20日 00:24/ 0 赞/ 140 阅读

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

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

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

相关移动端项目设配UI设计图方法

由于要使用UI的设计图，所以需要根据UI设定的尺寸来写页面下面是移动端适配的方法在script标签中执行 <script> (func

骑猪看日落/ 2023年07月25日 09:24/ 0 赞/ 12 阅读

相关鸿蒙OS屏幕适配UI设计图解决方案

先上图 > 这仨赏金猎人App解决方案赏金猎人开发日志地址[https://harmonyos.51cto.com/posts/3203][https_harmonyo

梦里梦外;/ 2022年11月05日 05:26/ 0 赞/ 38 阅读

相关移动端适配

rem计算JS方式计算尺寸参照的标准尺寸 750px 换算比例为 100:1 （100px=1rem 50px=0.5rem 5px=0.05rem）

Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 514 阅读

相关移动端适配

移动端适配一、移动端适配是什么？二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调

客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 475 阅读

相关移动端适配

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][

怼烎@/ 2022年05月27日 23:28/ 0 赞/ 473 阅读

相关移动端适配

1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc

水深无声/ 2022年03月17日 06:14/ 0 赞/ 432 阅读

相关移动端适配

移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0

冷不防/ 2022年01月29日 03:13/ 0 赞/ 521 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 511 阅读