请帮我写一个在不同得移动端屏幕宽度下 通过媒体查询去设置rem最佳效果得实例
时间: 2024-10-09 16:16:15 浏览: 21
当然,为了适应不同的移动终端屏幕宽度,我们可以编写一个基于rem的CSS样式,并配合媒体查询来优化用户体验。下面是一个简单的例子:
首先,在基础样式中,我们将根元素(通常是`<html>`)的初始`font-size`设为一个基准值,例如100px,然后将其转换为rem:
```css
html {
font-size: 100px; /* 这里可以根据实际需要调整基准值 */
}
```
接着,我们可以设置一些通用的媒体查询规则,比如针对iPhone X尺寸(约375px宽度)和更大的屏幕:
```css
/* iPhone X 范围(414px宽)和更大的屏幕 */
@media (min-width: 375px) and (orientation: portrait) {
html {
font-size: 100%; /* 保持原来的比例 */
}
}
/* 更大的屏幕 */
@media (min-width: 414px) {
html {
font-size: 105%;
}
}
```
如果你想要更细致地针对不同的分辨率和设备,可以添加更多的媒体查询条件:
```css
/* 对于像iPad Pro这样的设备,宽度可能更大 */
@media (min-width: 768px) {
html {
font-size: 110%;
}
}
/* 小型屏幕(如Android手机) */
@media (max-width: 374px) {
html {
font-size: 90%;
}
}
```