css3中rem的使用原理与技巧

简单来说,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; }

你可能感兴趣的:(css3中rem的使用原理与技巧)