Currently, I am in the process of establishing the fundamental elements of a responsive website. I have already defined the sizes for mobile and tablet devices, but I am uncertain about what to do for the desktop version:
For Mobile
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}
For Tablet
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
Are these dimensions suitable based on industry standards? How can I designate a version specifically for desktops with a width above 1024px?
/* For Mobile */
@media (min-width: 320px) {
.tester {
width: 100%;
height: 500px;
background-color: white;
}
}
/* For Tablet */
@media (min-width: 640px) {
.tester {
width: 100%;
height: 500px;
background-color: red;
}
}
/* For Desktop */
@media (min-width: 960px) {
.tester {
width: 100%;
height: 500px;
background-color: blue;
}
}