rem的用法_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:36:22
Original
1092 people have browsed it

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;    }}
Copy after login

 

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

扫码加入:

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!