: Discover Excellence

The Path To Discover Excellence

Thursday, 18 February 2016

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%;

No comments:

Post a Comment