手机端如何根据设计图尺寸快速开发

最新推荐文章于 2025-07-14 22:10:21 发布

cdgogo

最新推荐文章于 2025-07-14 22:10:21 发布

阅读量463

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端H5

本文链接：https://blog.csdn.net/qq_36699230/article/details/102858227

本文介绍了两种手机端设计图尺寸快速开发的方法：一是使用meta viewport动态设置初始缩放比例，二是利用rem布局。通过动态调整initial-scale值和设置Html的font-size，可以实现设计图在不同屏幕尺寸上的等比缩放。推荐使用rem布局，通过将设计图尺寸除以100转换为rem单位，便于开发和适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两种常用的解决方案

1、通过动态设置 viewport的 width 和 initial-scale
2、通过动态设置跟元素Html的font-size 即 rem解决方案

方法一 meta viewport

meta标签大家都很熟悉了，首先来看一下meta viewport 的6个属性：

属性名	解释
width	设置viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
height	设置viewport 的高度，这个属性并不重要，很少使用

一般情况下width的值设置为width-device即可，即当前设备的屏幕宽度，我们可以通过window.screen.width获取。所以要想在不同手机上自适应，我们就要动态的改变initial-scale（初始缩放值），并且设置user-scalable=no禁止用户手动缩放页面。

举一个例子：如果设计师给的尺寸是750px的，如何把750px的设计图等比缩放到我们当前宽度的手机上呢？假如当前手机的屏幕宽度是恰好是750px，那initial-scale就等于1好了完全不用缩放。假如当前的手机宽度是375px（iphone6/7/8），那岂不是要缩放一倍了（initial-scale=0.5），对的，缩放的倍数就等于当前手机屏幕宽度除以设计图的宽度。如果设计师给的是640px宽的图，针对不同的手机initial-scale的值是多少呢？（答案就在上一句）。

所以initial-scale的值是要动态获取的然后将meta标签添加到header标签里面，这就要用js操作dom了（js基础知识）。见下代码示例：

<script>
    var _vwidth = window.screen.width;
    var _scale = _vwidth / 750;
    var _meta = document.createElement('meta');
    _meta.setAttribute('name', 'viewport');
    _meta.setAttribute(