以下这段代码作用是，设置屏幕最大宽度640px，水平居中，以及不同屏幕下字体大小。可以将此放进common.css中使用：
@media only screen and (min-width: 640px) {
html {
font-size: 32px;
background: #8cbc8b; }
body {
width: 640px;
margin: 0 auto; }
}
@media only screen and (min-width: 620px) and (max-width: 640px) {
html {
font-size: 32px; } }
@media only screen and (min-width: 600px) and (max-width: 620px) {
html {
font-size: 31px; } }
@media only screen and (min-width: 580px) and (max-width: 600px) {
html {
font-size: 30px; } }
@media only screen and (min-width: 560px) and (max-width: 580px) {
html {
font-size: 29px; } }
@media only screen and (min-width: 540px) and (max-width: 560px) {
html {
font-size: 28px; } }
@media only screen and (min-width: 520px) and (max-width: 540px) {
html {
font-size: 27px; } }
@media only screen and (min-width: 500px) and (max-width: 520px) {
html {
font-size: 26px; } }
@media only screen and (min-width: 480px) and (max-width: 500px) {
html {
font-size: 25px; } }
@media only screen and (min-width: 460px) and (max-width: 480px) {
html {
font-size: 24px; } }
@media only screen and (min-width: 440px) and (max-width: 460px) {
html {
font-size: 23px; } }
@media only screen and (min-width: 430px) and (max-width: 440px) {
html {
font-size: 22px; } }
@media only screen and (min-width: 420px) and (max-width: 430px) {
html {
font-size: 21.5px; } }
@media only screen and (min-width: 410px) and (max-width: 420px) {
html {
font-size: 21px; } }
@media only screen and (min-width: 400px) and (max-width: 410px) {
html {
font-size: 20.5px; } }
@media only screen and (min-width: 380px) and (max-width: 400px) {
html {
font-size: 20px; } }
@media only screen and (min-width: 360px) and (max-width: 380px) {
html {
font-size: 19px; } }
@media only screen and (min-width: 340px) and (max-width: 360px) {
html {
font-size: 18px; } }
@media only screen and (min-width: 320px) and (max-width: 340px) {
html {
font-size: 17px; } }
@media only screen and (min-width: 300px) and (max-width: 320px) {
html {
font-size: 16px; } }
@media only screen and (max-width: 300px) {
html {
font-size: 15px; } }
CSS3 @media 查询
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/16122.html
