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

目录
两种常用的解决方案

  • 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弹性布局哦

上一篇:智力数理推理


下一篇:750【毕设课设】基于单片机无线音乐门铃控制系统设计