如何设置`rem unit`

Posted 2023-04-11

参考技术A 比如一个div的宽度是16px,此时你可以使用 1rem 替代

如果此时你修改 html 的 font-size

如果页面中所有的单位都使用了rem，就可以通过修改html的font-size大小按照比例缩放页面

根据介绍 1rem === 网页根元素的字体大小 因此，我们可以通过修改 html 元素的 font-size 大小,改变 rem unit 的值

用来做不同屏幕的适配器。比如屏幕变大，可以修改html font-size修改大小

移动端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文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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媒体查询文件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

(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