- RWD-Responsive Web Design.
- It is used to make your web page look good, appropriate and well placed on all devices like desktops, tablet, smartphones, etc.
- It uses HTML and CSS to hide, resize, enlarge, shrink or move the content.
- It makes the content look good on any screen.
- It is viewed on to provide an optimal viewing experience and it is automatically adjusting the structure of the webpage based on device.
For Example,
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%20%20%20%3Chead%3E%0A%20%20%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%0A%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20*%20%7B%0A%20%20%20%20%20%20%20%20%20box-sizing%3Aborder-box%3B%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20.left%20%7B%0A%20%20%20%20%20%20%20%20%20background-color%3A%232196F3%3B%0A%20%20%20%20%20%20%20%20%20padding%3A20px%3B%0A%20%20%20%20%20%20%20%20%20float%3Aleft%3B%0A%20%20%20%20%20%20%20%20%20width%3A20%25%3B%20%2F*%20The%20width%20is%2020%25%2C%20by%20default%20*%2F%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20.main%20%7B%0A%20%20%20%20%20%20%20%20%20background-color%3A%23f1f1f1%3B%0A%20%20%20%20%20%20%20%20%20padding%3A20px%3B%0A%20%20%20%20%20%20%20%20%20float%3Aleft%3B%0A%20%20%20%20%20%20%20%20%20width%3A60%25%3B%20%2F*%20The%20width%20is%2060%25%2C%20by%20default%20*%2F%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20.right%20%7B%0A%20%20%20%20%20%20%20%20%20background-color%3A%234CAF50%3B%0A%20%20%20%20%20%20%20%20%20padding%3A20px%3B%0A%20%20%20%20%20%20%20%20%20float%3Aleft%3B%0A%20%20%20%20%20%20%20%20%20width%3A20%25%3B%20%2F*%20The%20width%20is%2020%25%2C%20by%20default%20*%2F%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%2F*%20Use%20a%20media%20query%20to%20add%20a%20break%20point%20at%20800px%3A%20*%2F%0A%20%20%20%20%20%20%20%20%20%40media%20screen%20and%20(max-width%3A800px)%20%7B%0A%20%20%20%20%20%20%20%20%20.left%20%20%2C%20.main%2C%20.right%20%7Bwidth%3A100%25%3B%7D%0A%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%3C%2Fhead%3E%0A%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%3Ch2%3EMedia%20Queries%3C%2Fh2%3E%0A%20%20%20%20%20%20%3Cp%3EResize%20the%20browser%20window%2C%20up%20and%20down%20around%20800px%20wide.%3C%2Fp%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22left%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cp%3ELeft%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22main%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cp%3EMain%20Content%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22right%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cp%3ERight%3C%2Fp%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%3C%2Fbody%3E%0A%3C%2Fhtml%3E” message=”” highlight=”” provider=”manual”/]Output
