zoukankan      html  css  js  c++  java
  • 移动端rem切图

    1.为什么用rem

    根据屏幕大小,自动调整大小

    2.如何使用rem

    分以下几步

    a.用ps把设置稿弄成640px或者750px的(记得等比例缩放)

    b.调试时记得把浏览器默认最小字体设置为最小。手机端是支持12px以下的字体的

    c.引入meta头

        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

    d.引入reset文件

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    button,article, aside, canvas, details, embed, figure,
    figcaption, footer, header, hgroup, menu, nav,
    output, ruby, section, summary, time, mark,
    audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
    ol, ul { list-style: none; }
    button{background: transparent;}
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    strong { font-weight: bold; }
    table { border-collapse: collapse; border-spacing: 0; }
    img { border: 0; max- 100%; }
    html{
    line-height: initial;
    }
    body{
    font-size: 0.32rem;
    }
    

      

    e.引入js媒体查询文件

    (function(doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth >= 750) {
    docEl.style.fontSize = '100px';
    } else {
    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    }
    };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    

      

    f.直接在750px或640px的情况下切图,单位也直接用px

    g.到http://www.520ued.com/把px转为rem,html的字体大小填100px。

    H.收工!!

    参考资料:

    http://www.520ued.com/

    http://bbs.it-home.org/thread-64920-1-1.html

  • 相关阅读:
    linux下安装jmeter
    Jmeter 跨线程组传递参数 之两种方法
    Jmeter之Json Path Extractor 接受上一个请求的响应参数
    Jmeter之添加响应断言,bean shell post processor
    Jmeter 分布式压力测试
    Jmeter之一个请求获取上一个请求的参数
    selenium自动化测试实例
    SqlBulkCopy类进行大数据(一万条以上)插入测试
    SqlServer存储过程传入Table参数
    Asp.Net EF Code First 简单入门
  • 原文地址:https://www.cnblogs.com/norm/p/6160583.html
Copyright © 2011-2022 走看看