Kamalesh AR

Posted on May 27

Media queries in Css

#learning #css #webdev #programming

Media Queries

A CSS media query is used to apply different styles based on the device's characteristics like screen size, orientation, or resolution. This makes your website responsive, ensuring it looks good on all devices, including desktops, tablets, and smartphones. Media queries are key for creating a mobile-friendly and responsive design.

Media queries can be used to check many things like the following

Width and height of the viewport
Width and height of the device
Orientation
Resolution

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page.

CSS media queries are essential for creating responsive web pages.

The CSS @media rule is used to add media queries to your style sheet.

Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

Media Query Syntax

A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.

@media [not] media-type and (media-feature: value) and (media-feature: value) { /* CSS rules to apply */ }

The media-type is optional. However, if you use not, you must also specify a media-type.

The result of a media query is true if the specified media-type matches the type of device, and all media-features are true. When a media query is true, the corresponding style rules are applied, following the normal cascading rules.

Meaning of the not and and keywords:

not: This optional keyword inverts the meaning of the entire media query.

and: This keyword combines a media-type and one or more media-features.

How Do Media Queries Work?

A media query consists of a media type (like screen, print) and conditions (like screen width or orientation). If the conditions are true, the specified styles will be applied. You use the @media rule in your CSS to define these conditions.

@media not | only mediatype and (expression)
{
    // Code content
}

Syntax

A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.

Media types define the broad category of device for which the media query applies: all, print, screen.

The type is optional (assumed to be all) except when using the only logical operator.

Media features describe a specific characteristic of the user agent, output device, or environment:

Targeting media types

Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers

@media print {
  /* … */
}

You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:

@media screen, print {
  /* … */
}

See media types for the list of available media types. Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen, print, and all remaining. To target more specific attributes, use media features instead.

Targeting media features

Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

@media (hover: hover) {
  /* … */
}

Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation feature accepts either landscape or portrait.

@media (max-width: 1000px) {
  /* … */
}

CSS Media Types

The optional media type specifies the type of media the styles are for. If media type is omitted, it will be set to "all".

Valu------> Description
all----> Used for all media type devices
print---> Used for print preview mode
screen---> Used for computer screens, tablets, and smart-phones

CSS Media Features

The media feature specifies a specific characteristic of the device.

Here are some commonly used media features:

max-height-->Maximum height of the viewport
min-height-->Minimum height of the viewport
height--->Height of the viewport (including scrollbar)
max-width--->Maximum width of the viewport
min-width--->Minimum width of the viewport
width------>Width of the viewport (including scrollbar)
orientation--->Orientation of the viewport (landscape or portrait)
resolution Screen resolution
prefers-color--->User's preferred color scheme (light or dark)
-scheme

Real time example convo

Here i saw this in the stack overflow developer community discussion.he asked a question about this concept and how to use this property in real time project. So shared that convo and solutions to.

Question:

I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand

my queries requirement is

if screen width is 100 to 480 then different style comes,

if screen width 481 to 600 then different style comes,

if screen width 601 to 800 then different style comes,

if screen width 801 then default CSS should work.

Solution:
1.

.class { /* default style */ }

@media (min-width: 100px) and (max-width: 480px) {
 .class { /* style */ }
}

@media (min-width: 481px) and (max-width: 600px) {
 .class { /* style */ }
}

@media (min-width: 601px) and (max-width: 800px) {
 .class { /* style */ }
}

The basic relies on using this kind of queries:

@media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make 
your site pretty on this range.*/
}

Please remember that when using responsive web design you should use percentages when possible also em for fonts.

media queries are now available for IE. take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them. A polyfil I been using with good results is response.js

From this i learned a new one that is can i use website.Can I Use is an important tool for frontend developers to check browser compatibility for web technologies. It ensures websites work correctly across different browsers and devices, helping developers create responsive and reliable web applications.