从零开始的项目先手工作: UI设计图切图，页面布局（响应式布局处理）从零开始的项目先手工作: UI设计图切图，页面布局（

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

UI设计图切图

切图工具：PS、PXCook
切图方式：

a. 用PS裁剪工具切图： --- i. 打开"视图"-->"标尺"，拖动辅助线到所要裁剪的区域； --- ii. 从左侧工具栏选择"裁剪工具"，然后鼠标拖动选择裁剪区域，可按"Ctrl"键对齐基准线，裁剪区域中不需要的元素可先隐藏，裁剪区域确定后可直接按"Enter"回车键或右键点击"裁剪"选项； --- iii. 从顶部菜单栏点击"文件"-->"存储为web所用格式"，填写所需参数后储存即可。 --- iv. 切记裁剪存储后返回原型，已便下次裁剪："窗口"-->"历史记录"！
b. 用PXCook配合PS快速切图： --- i. 先开启PS的远程连接功能：顶部菜单栏"编辑"-->"远程连接"，填写账密以及勾选"启用远程连接"； --- ii. 然后在PS中先隐藏不需要导出的图层，接着合并要导出的可见图层：按住"Ctrl"选择多个图层，右键点击"合并可见图层"选项 --- iii. 回到PXCook，点击右上角"切图工具"，在弹出窗口选择"按选择切图"，配置所需参数后，用鼠标在PS中选中之前合并的图层，最后在PXCook的"切图工具"窗口点击"切所选图层"，完毕。

响应式布局样式

当前项目设计稿尺寸"2667 * 1500",图下：如上图所示：

登录按钮在"2667 * 1500"分辨率下以1rem = 100px换算尺寸为"2.05rem * 2.56rem"
... ...

响应式方式有多种：流式布局百分比、媒体布局@media、弹性布局flex、rem布局... ...
rem布局：根据不同分辨率得到相应的比例，值和单位不变 a. 实现设置meta声明响应式：

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

b. 自定义两种方式： --- i. rem.less

@charset "UTF-8";

//1. 变量
//rem适配方案不好维护  设备会更新  设计稿尺寸  预设基准值
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸
@psdWidth:750px;
//预设基准值
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);

//2. 混入
//遍历使用的是for循环
//less没有循环语法
//使用函数的迭代 死循环
//根据数组的长度去停止当前循环
//给函数的执行附加条件
//需要序号来判断  通过序号遍历 @index 1 开始
//遍历成功
.adapterMixin(@index) when ( @index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}

//3. 适配
.adapterMixin(@len);

--- ii. rem.js 设计稿尺寸"2667 * 1500",所以 (designWidth, maxWidth) = (2667, 2667)

;(function (designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        }
        ;
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle = "html{font-size:" + rem + 'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if (!document.getElementById('rootsize')) {
            document.getElementsByTagName("head")[0].appendChild(rootItem);
            rootItem.id = 'rootsize';
        }
        if (rootItem.styleSheet) {
            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
        } else {
            try {
                rootItem.innerHTML = rootStyle
            } catch (f) {
                rootItem.innerText = rootStyle
            }
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    };
    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);
    }
})(375, 750);
//例如设计稿为375，最大宽度为750，则为(375,750)
//如果设计稿上面某一个元素的尺寸是256px，那么我们在css样式中，将它的尺寸设置成2.56rem即可，即1rem=100px。

技巧：psd设计稿原图是"2667 * 1500",可通过PS改成其他尺寸，如"1920 * 1080"：菜单栏"图像"-->"图像大小"，从而可以修改配置项。但记住，rem.js也要修改 (designWidth, maxWidth) = (1920, 2667)

响应式页面示例

实例预览