由用户使用任意数字响应，而不是在 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 */
}

希望对您有所帮助