在手机和pc的网页开发中,往往会让字体或者图片跟着手机的分辨率改变而改变,那么怎样实现呢,我们可以根据现实中的分辨率大小来设置我们的css来控制。下面以改变body的字体大小为例:
body {
background-color: rgb(203,232,238);
font: 12px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
padding: 0;
margin: 0;
text-align:center;
}
@media (min-width: 540px) {
body {
font: 13px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
}
}
@media (min-width: 768px) {
body {
font: 15px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
}
}
}
@media (min-width: 992px) {
body {
font: 24px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
}
}
@media (min-width: 1200px) {
body {
font: 40px/ 1.5 Microsoft YaHei, Helvitica, Verdana, Arial, san-serif;
}
}