移動端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-width: 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