Question

我正在为移动IOS工作，

我觉得我应该开始担心不同的屏幕尺寸，我所有CSS个对象的默认尺寸都是iphone 6分辨率，默认为320px x 536px。

我开始使用JS添加Iphone 6兼容性以检测屏幕大小，当我使用jQuery对象调整大小时，它看起来不太好.css(..)

有人反对我使用以下内容。

@media screen and (max-width: 375px) {
#obj1 {
      blabla: blabla
  }
}

唯一的问题是我必须将@media screen and...包裹在我拥有的每个css对象周围？或者我可以将它包裹在CSS中的所有div中，我现在有300个CSS个对象，将@media...包装在每一个上都会很烦人。

Answer 1

你需要将所有div设置为一个类，以避免一个接一个地通过id。

<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
@media screen and (max-width: 375px) {
.myclass {
      blabla: blabla
  }
}

Answer 2

您应该构建一个负责任的设计。 Bootstrap有一个非常棒的解决方案，用于构建基于12列布局的响应式设计。您可以将类应用于布局，以根据可用空间来决定显示的内容。在此处阅读更多相关信息：http://getbootstrap.com/css/#grid

W3Schools在这里有一个解释：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

管理多种不同的屏幕尺寸

2 个答案: