CSS Code for Responsive Web Design
CSS Media Queries are a core part of responsive web design, allowing you to conditionally apply CSS styles based on device width. You should have only one CSS Styles for everything, but if something is related to screen-width, then copy the code below and make your design responsive.
@media screen and (max-width: 300px) {
/* Type you code here */
}
@media screen and (min-width: 301px) and (max-width: 400px) {
/* Type you code here */
}
@media screen and (min-width: 401px) and (max-width: 500px) {
/* Type you code here */
}
@media screen and (min-width: 501px) and (max-width: 600px) {
/* Type you code here */
}
@media screen and (min-width: 601px) and (max-width: 700px) {
/* Type you code here */
}
@media screen and (min-width: 701px) and (max-width: 800px) {
/* Type you code here */
}
@media screen and (min-width: 801px) and (max-width: 900px) {
/* Type you code here */
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
/* Type you code here */
}
@media screen and (min-width: 1001px) {
/* Type you code here */
}Note that, some mobile phone's width is 320px. So, you should consider screen-size from lower than 320px to larger than 1000px.
Essential HTML Meta Tag
For media queries to work correctly on mobile devices, especially for ensuring the viewport width corresponds to the device width, you must include the following meta tag in the
<head> section of your HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
