IT源码网

移动端rem切图讲解

flyfish 2021年02月16日 编程语言 200 0

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

 

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

css弹性布局讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。