Enjoy 20% off all plans by following us on social media. Check out other promotions!
测验题

你能解释一下将网站编码为响应式与使用移动优先策略之间的区别吗?

Topics
CSS
在GitHub上编辑

这两种办法并非相互排斥。 网站响应意味着某些元素将根据设备的屏幕大小通过调整其大小或其他功能来应对。 通常是视图宽度,通过 CSS 媒体查询,例如,在较小的设备上使字体大小更小。

@media (min-width: 768px) {
.my-class {
font-size: 24px;
}
}
@media (max-width: 767px) {
.my-class {
font-size: 12px;
}
}

移动优先的策略也是响应式的,但它允许我们应该默认和定义移动设备的所有样式,只在以后为其他设备添加特定的响应式规则。 沿用上一个示例:

.my-class {
font-size: 12px;
}
@media (min-width: 768px) {
.my-class {
font-size: 24px;
}
}

移动优先策略具有以下主要优点:

  • 它在移动设备上的性能更强,因为适用于它们的所有规则都不必与任何媒体查询进行验证。
  • 移动优先的设计更有可能在更大的设备上使用(只是会显得更拉长,但仍然可以使用)。 当然,反过来就不适用了。
在GitHub上编辑