html - 由用户响应任意数字，而不是在 CSS 中自动响应

Question

开发者通过响应式设计来指定网页内容何时堆叠是否可行？因此，例如，如果您的分辨率为 1200 x 1800，则您处于以下显示中：

[A] [B]

但是，如果您的分辨率为 1000 x 1800，则借助 Twitter Bootstrap 的响应功能（我使用 Bootstrap 3），您的显示将自动以以下堆栈格式显示：

[A]
[B]

但是，开发人员指定响应时间是否可行-例如，当分辨率小于1100 x 1800时，会发生上述堆栈-如果可行，我该如何指定？

我使用 Bootstrap、HTML5、CSS3 以及 node.js，但我认为 node 在这种情况下是无关紧要的。

我使用谷歌浏览器，并不关心其他浏览器对更改的反应。

谢谢。

Answer 1

一种方法可能是查看媒体查询( 2 )，例如引用Mozilla

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Answer 2

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

希望对你有帮助