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

  • 相关阅读:
    正则表达式大全
    函数基础(二)
    函数基础(一)
    bzoj3531 [Sdoi2014]旅行
    bzoj4785 [Zjoi2017]树状数组
    bzoj4568 [Scoi2016]幸运数字
    bzoj1975 [Sdoi2010]魔法猪学院
    bzoj1079 [SCOI2008]着色方案
    bzoj1996 [Hnoi2010]chorus 合唱队
    bzoj2326 [HNOI2011]数学作业
  • 原文地址:https://www.cnblogs.com/norm/p/6160583.html
Copyright © 2011-2022 走看看