Heim > Web-Frontend > HTML-Tutorial > rem的用法_html/css_WEB-ITnose

rem的用法_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:36:22
Original
1154 Leute haben es durchsucht

rem 是css3中的属性,ie8下不兼容。
rem是相对于根元素  这就意味着我们只需要在 根目录加入以下css代码。 默认单位为16px,我们需要在用rem的时候除以16  就是rem的值。  比如字体是20px,

 20÷16 = 1.25rem即可。

@media only screen and (max-width: 320px) {    html {        font-size: 16px;    }}@media only screen and (min-width: 321px) and (max-width: 360px) {    html {        font-size: 18px;    }}@media only screen and (min-width: 361px) and (max-width: 375px) {    html {        font-size: 18.75px;    }}@media only screen and (min-width: 376px) and (max-width: 384px) {    html {        font-size: 19px;    }}@media only screen and (min-width: 385px) and (max-width: 413px) {    html {        font-size: 19px;    }}@media only screen and (min-width: 414px) and (max-width: 480px) {    html {        font-size: 20.7px;    }}@media only screen and (min-width: 481px) and (max-width: 540px) {    html {        font-size: 27px;    }}
Nach dem Login kopieren

 

推荐前端交流群: 群号:339840649; 群名称:html5/css3/js/jq/nodejs/div 欢迎加入~
点击加入:

扫码加入:

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage