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

  • 相关阅读:
    SpringBoot(五)-- 整合Spring的拦截器
    SpringBoot(四)-- 整合Servlet、Filter、Listener
    SpringBoot(三)-- 整合FreeMarker模板
    XML转JSON工具类
    SpringBoot(二)-- 支持JSP
    SpringBoot(一)-- 知识点介绍
    导出Excel工具类
    Linux CentOS6.5上搭建环境遇到的问题
    网络环境未能通过安全验证,请稍候再试
    Struts2,Spring,Hibernate框架的优缺点
  • 原文地址:https://www.cnblogs.com/norm/p/6160583.html
Copyright © 2011-2022 走看看