css - 试图理解响应式设计中的特定场景

Question

假设我在网页上有一个 div，它以 1000 像素的宽度显示在桌面上。假设我希望该 div 在所有手机上以纵向模式以 100% 宽度显示。如果不使用 Bootstrap，最简单的方法是什么？

Answer 1

.yourdiv {
  width: 100%;
  max-width: 1000px;
}

此规则适用于以下情况:如果屏幕宽度超过 1000 像素，它使 DIV 宽度为 1000 像素，并在所有小于 1000 像素宽度的屏幕上使它 100% 宽度。