Tips for front-end engineers PC PC-side resolution

PC-Side

Sort by screen width (mainstream orange)

Resolution Scale | Equipment size

1024*500 (8.9 inch)

1024x768 (ratio 4:3 | 10.4-inch, 12.1-inch, 14.1-inch, 15-inch; ）

1280*800 (16:10 |15.4 inch)

1280*1024 (Scale: 5:4 | 14.1 ", 15.0")

1280*854 (scale: 15:10 | 15.2)

1366*768 (scale: 16:9 | uncommon)

1440*900 (16:10 17 inch only for apples)

1440*1050 (Scale: 5:4 | 14.1 ", 15.0")

1600*1024 (14:9 uncommon)

1600*1200 (4:3 | 15, 16.1)

1680*1050 (16:10 | 15.4 ", 20.0")

1920*1200 (23 inch)

Through the above computer screen and size of the example table we got a few widths

1024 1280 1366 1440 1680 1920

PC-side Responsive media breakpoints

CSS Code

@media (min-width:1024px) {
BODY{FONT-SIZE:18PX}
}/*>=1024 's Device */

@media (min-width:1100px) {
body{font-size:20px}
}/*>=1024 's Device */
@media (min-width:1280px) {
body{font-size:22px;}
}

@media (min-width:1366px) {

body{font-size:24px;}
}

@media (min-width:1440px) {
body{font-size:25px!important;}
}

@media (min-width:1680px) {
body{font-size:28px;}
}
@media (min-width:1920px) {
body{font-size:33px;}
}

When using the min-width, small put above the big in below, similarly if is with Max-width then is big in above, small in below

Tips for front-end engineers PC PC-side resolution