本篇教程探讨了CSS3中rem的使用原理与技巧，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

简单来说，rem是相对于HTML根元素为基准的相对单位。

@media screen and(min-width:1080px){html,doby{font-size:34px!important;}}

这句话的意思就是，如果屏幕大于1080宽度，HTML跟元素字体为34px，这时候，1rem=34px；

@media screen and(min-width:721px)and(max-width:1079px){html,body{font-size:26px!important;}}这句话的意思是，在大于720px但小于1080px的宽度，HTML根元素为26px，这时候，1rem=26px;

在不同的环境，基准不一样，你要设置的大小就是一句这个基准值做的计算，比如1rem=20px，你想设置你的高度为100 px,那就设置54rem；

通用的样式：

@import url(add.css);

/* fontsize reset */

@media screen and (min-width: 1080px) { html, body { font-size: 34px !important; } }

@media screen and (min-width: 721px) and (max-width: 1079px) { html, body { font-size: 26px !important; } }

@media screen and (min-width: 640px) and (max-width: 720px) { html, body { font-size: 24px !important; } }

@media screen and (min-width: 540px) and (max-width: 639px) { html, body { font-size: 20px !important; } }

@media screen and (min-width: 480px) and (max-width: 539px) { html, body { font-size: 16px !important; } }

@media screen and (min-width: 320px) and (max-width: 479px) { html, body { font-size: 14px !important; } }

/* 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, 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: none; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: none; }

body { font-family: Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti"; color: #333; background: #E8E8E8; }

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！