Could you tell me how to write the css layout @ media media query for compatible notebooks?

the current project is compatible with laptops and desktops.
but what is the size of the notebook?
Notebook @ media how to write

Mar.07,2021

Notebook resolution generally needs to be adapted to 1366x768 and 1440x900, corresponding to 13-inch and 14-inch screens respectively, not to mention that 1920x1080 screens are basically in line with desktop resolution. However, there will be a headache, that is, high-resolution screen adaptation (mainly modified this part of the system DPI). My processing method is similar to that of the mobile side, that is, using DPR media adaptation statements (compatible with writing webkit and moz is basically enough) with font-size to do the overall zoom, so that on the one hand, it can be compatible with the high-score screen, on the other hand, it can also partially deal with the misoperation of accidentally zooming the web page. The page frame uses bootstarp, this piece may have to change the original file, otherwise the high split screen will collapse (a variety of larger ones).


now the notebook screen is also very big. You can write

like this.
@media screen and (min-width: 1000px) and (max-width: 2000px) {
    body {
        background-color: red;
    }
}
@media screen and (min-width: 2000px) and (max-width: 3000px) {
    body {
        background-color: blue;
    }
}

if not, are you talking about adaptation or something?

Menu