CSS Media Features in Media Queries
CSS Media Features in Media Queries
Media queries in web development ensure that a website design is responsive. It does so through creating tailored style sheets based on the resolution of the device that it is displayed upon. The browser will detect the screen size and apply the CSS styles for that screen size based on specified media features. Media queries can set rules based on features like the screen width, the screen resolution and device orientation. These media rules can be separated by commas. When one of the media rules is true then the accompanying CSS will apply.
css media query
A CSS media query can be used to adapt a website’s display and layout to different screen sizes. A media query begins with the @media
keyword and is followed by one or more conditions that check screen
size, orientation, resolution, and/or other properties. If these
conditions are met, all CSS rules within the media query will be applied
to the page. Media queries are used for responsive web design by
tailoring specific stylesheets to different types of devices such as
laptops, tablets, mobiles, and more.
/* For screen sizes less than or equal to 480px (most likely a mobile device), the body element's font size will be set to 12px and the #photo element's width will be set to 100% */
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
#photo {
width: 100%;
}
}
Join the conversation