为什么在移动端用rem圆角不圆

最新推荐文章于 2023-04-22 14:21:01 发布

转载最新推荐文章于 2023-04-22 14:21:01 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hellman/p/7596076.html

本文介绍了如何使用REM单位结合媒体查询实现响应式布局。通过调整不同屏幕尺寸下的字体大小，确保网页元素按比例缩放，保持良好的视觉效果。

rem是根据网页效果图的尺寸来计算的，当然还要借助媒体查询来完成。
例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以11.25，就是对应下面媒体查询720px；例如16px的话就要16/11.25这样来计算。用之前要把下面这段代码放到你css文件里：
@media only screen and (max-width: 1080px) {
html, body {
font-size: 16.875px;
}
}

@media only screen and (max-width: 960px) {
html, body {
font-size: 15px;
}
}

@media only screen and (max-width: 800px) {
html, body {
font-size: 12.5px;
}
}

@media only screen and (max-width: 720px) {
html, body {
font-size: 11.25px;
}
}

@media only screen and (max-width: 640px) {
html, body {
font-size: 10px;
}
}