Question

我是html＆amp; CSS编程的新手，非常喜欢它。

Bootstrap是一个节省生命，清洁，简单和＆lt; 3一切。

我需要一些媒体查询的建议

在Bootstrap 4中，有两个选择（首先是移动设备或第一个是桌面设备）**指的是最小宽度和最大宽度

经过一些实验，我首先喜欢使用桌面而不是编写移动设备

// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

我认为这将首先关注移动设备而不是移动到桌面

这个从桌面到移动

// Extra small devices (portrait phones, less than 34em)
@media (max-width: 33.9em) { ... }

// Small devices (landscape phones, less than 48em)
@media (max-width: 47.9em) { ... }

// Medium devices (tablets, less than 62em)
@media (max-width: 61.9em) { ... }

// Large devices (desktops, less than 75em)
@media (max-width: 74.9em) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

但我发现桌面首先会覆盖小型媒体查询

@media (max-width: 74.9em) { body {background-color: pink;} }
@media (max-width: 61.9em) { body {background-color: blue;} }
@media (max-width: 47.9em) { body {background-color: green;} }
@media (max-width: 33.9em) { body {background-color: red;} }

body {
    background-color: skyBlue;
}

当我缩小它时，它只显示天蓝色...... 但如果我用另一种方式可以吗？

/* global */
body {
    background-color: skyBlue;
}

/* less than 75 */
@media (max-width: 74.9em) { body {background-color: pink;} }


/* less than 62 */
@media (max-width: 61.9em) { body {background-color: blue;} }

/* less than 48 */
@media (max-width: 47.9em) { body {background-color: green;} }

/* less than 34 */
@media (max-width: 33.9em) { body {background-color: red;} }

意思是，我会先将大屏幕的代码逐个编码到小型设备上？...

Answer 1

我会先将大屏幕的代码逐个编码到小型设备

这是完成此操作的最佳方式。从大到小。

<强>为什么吗
因为所有小于34.00 em的设备也小于75.00 em ，所以总是最后一个会覆盖所有内容。现在当你颠倒这个顺序时，它对你来说会很好。每个设备都将在其中一个查询中停止，并且不会更进一步。

/* MORE THAN 75 */
body { background-color: skyBlue; }

/* LESS THAN 75 */
@media (max-width: 74.9em) { body {background-color: pink;} }

/* LESS THAN 62 */
@media (max-width: 61.9em) { body {background-color: blue;} }

/* LESS THAN 48 */
@media (max-width: 47.9em) { body {background-color: green;} }

/* LESS THAN 34 */
@media (max-width: 33.9em) { body {background-color: red;} }

Bootstrap 4 - 媒体查询方法

1 个答案: