Bootstrap 4 - 媒体查询方法

Question

我是html和CSS编程的新手,非常喜欢它.

Bootstrap是一个救命,清洁,简单和<3一切.

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

在Bootstrap 4中,有2个选项(首先是移动设备或第一个是桌面设备)**指的是最小宽度和最大宽度

经过一些实验,我首先喜欢使用桌面而不是代码移动

// 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;} }