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

两种常用的解决方案

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('content', ' width = device - width , user - scalable = no , initial - scale = ' + _scale); document.getElementsByTagName('head')[0].appendChild(_meta); </script>

之后就可以根据设计图给的尺寸大小写css了，是28px我们就写28像素，宽度是750px我们就写750px（当然：也可以写100%）。

方法二 rem布局（推荐）

//designWidth:设计稿的实际宽度值，需要根据实际设置 //maxWidth:制作稿的最大宽度值，需要根据实际设置 //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) //很遗憾，如果是iphoneX的设计尺寸（1125），该方法不适用，可以把设计图转换成750的 (function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width>maxWidth && (width=maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次； refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px"; } else { doc.addEventListener("DOMContentLoaded", function(e) { doc.body.style.fontSize = "16px"; }, false); } })(750, 750);

此时，如果750的设计图中宽度是100px，那么代码中的宽度大小则是1rem,换算方法是：设计图中的尺寸除以100，单位是rem。 在项目开发中根据实际情况选择应用，同时别忘了设置一系列的 meta 标签，还可以结合flex弹性布局哦