css – Bootstrap 4 – 媒体查询方法

我是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;} }

这意味着,我将首先将大屏幕编码为小型设备？…

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