要对固定分辨率的页面添加自适应能力,可以使用 CSS 的 @media 规则。@media 规则允许根据设备的屏幕尺寸和方向来定义不同的样式。通过在 CSS 中使用媒体查询,可以针对不同的设备宽度应用不同的样式,从而实现页面的自适应。
以下是一个简单的示例:
/* 当设备宽度小于等于 768 像素时,应用以下样式 */
@media (max-width: 768px) {
body {
font-size: 14px; /* 修改字体大小 */
width: 100%; /* 修改页面宽度 */
}
}
/* 当设备宽度大于 768 像素时,应用以下样式 */
@media (min-width: 769px) {
body {
font-size: 16px; /* 修改字体大小 */
width: 768px; /* 修改页面宽度 */
margin: 0 auto; /* 水平居中 */
}
}
在上面的示例中,@media 规则使用了媒体查询,它们用于根据设备的宽度来应用不同的样式。max-width 和 min-width 是媒体查询中最常用的属性,它们分别表示设备宽度的最大和最小值。当设备宽度小于等于 768 像素时,应用第一个 @media 规则中的样式;当设备宽度大于 768 像素时,应用第二个 @media 规则中的样式。
除了使用 @media 规则外,还可以使用 CSS 的相对长度单位(如 %、em、rem 等)和 Flexbox 布局等技术来实现页面的自适应。这些技术可以帮助我们更灵活地控制页面布局和样式,从而实现更精细的自适应效果。