Media Queries


    Media Queries


  • Media queries are a feature of CSS that enable webpage content to adapt to different screen sizes and resolutions. They are a fundamental part of responsive web design and are used to customize the appearance of websites for multiple devices.
    Media queries may be inserted within a webpages HTML or included in a separate .CSS file referenced by the webpage. Below is an example of a simple media query:
    @media screen and (max-width: 768px){  header { height: 70px; }  article { font-size: 14px; }  img { max-width: 480px; }}
    The media query above activates if a users browser window is 768 pixels wide or less. This could happen if you shrink your window on a desktop computer or if you are using a mobile device, such as a tablet, to view the webpage.
    In responsive web design, media queries act as filters for different screen sizes. Like all modules within a cascading style sheet, the ones that appear further down the list override the ones above them. Therefore, the default styles are typically defined first within a CSS document, followed by the media queries for different screen sizes. For example, the desktop styles might be defined first, followed by a media query with styles for tablet users, followed by a media query designed for smartphone users. Styles may also be defined in the opposite order, which is considered mobile first development.
    While min-width is by far the most common feature used in media queries, many others are available as well. Examples include min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation, and resolution. The resolution value, for instance, may be used to detect HiDPI displays (such as retina displays) and load high-resolution graphics instead of standard images.


    * These videos are coming directly from Youtube, they may or may not be most relevant to the word "Media Queries"

 

What is Define Dictionary Meaning?

Define Dictionary Meaning is an easy to use platform where anyone can create and share short informal definition of any word.
Best thing is, its free and you can even contribute without creating an account.

Related Words

View More



© Define Dictionary Meaning. All rights reserved

Looks like your connection to Define Dictionary Meaning was lost, please wait while we try to reconnect.