two screen widths: 375px and 1024px - css

Question

How do I build a website at two screen widths: 375px and 1024px? the website need not respond to widths between the two.
#media only screen and (min-width : 375px) and (max-width : 1024px)
As far as I know this tag media work between 375 and 1024. Perhaps using breakpoint is the right approach. Any suggestion?

Answer 1

It is always best to design your CSS mobile-first, which means that your CSS file looks a little like this:
CSS:
// Basic CSS
div {
height: 200px;
width: 200px;
background-color: yellow;
}
#media screen and (min-width: 375px) {
div {
height: 150px;
}
}
#media screen and (min-width: 1024px) {
div {
height: 100px;
background-color: red;
}
This way you have a div that renders in three different ways on your breakpoints
0 - 374px it's a square of 200x200 pixels with a yellow background
375px - 1023px it's a rectangle of 150x200 pixels with a yellow background
1024px and up it's a rectangle of 100x200 pixels with a red background
This way you don't repeat yourself too much, your code stays clean and you only override what is necessary.

Answer 2

I am giving media queries for all devices with portrait mode also . I am given the media query CSS using breakpoint also. Use this media query for the better use and also the portrait devices include in this answer:
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
//CSS
}