Related Topics
CSS
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In this example, the “viewport” meta tag tells the browser to set the width of the viewport to the width of the device, and to set the initial zoom level to 1.0. This means that the website will be scaled to fit the screen size of the device, and will not be zoomed in or out by default.
The viewport meta tag is essential for creating responsive websites that work well on different devices. It allows designers and developers to optimize the layout and content of a website for different screen sizes, ensuring that users have a consistent and enjoyable experience, regardless of the device they are using.
@media screen and (min-width: 768px) {
/* styles for screens wider than 768px go here */
}
In this example, the media query targets screens that are wider than 768 pixels.
2. Add styles for the targeted screen size: Within the media query, add styles that are specific to the targeted screen size. For example:
@media screen and (min-width: 768px) {
/* styles for screens wider than 768px go here */
body {
font-size: 18px;
}
.container {
max-width: 960px;
}
}
In this example, the font size of the body element is increased to 18 pixels for screens wider than 768 pixels, and the max-width of the container element is set to 960 pixels.
3. Repeat for other screen sizes: Repeat the process for other screen sizes by adding more media queries to your CSS. For example:
@media screen and (min-width: 480px) {
/* styles for screens wider than 480px go here */
body {
font-size: 16px;
}
.container {
max-width: 768px;
}
}
In this example, the font size of the body element is set to 16 pixels for screens wider than 480 pixels, and the max-width of the container element is set to 768 pixels.
By using media queries in your HTML, you can create responsive designs that adapt to different screen sizes. It’s important to test your website on different devices to ensure that it looks good and works well on all screen sizes.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.