css media query mobile

0
210
css media query mobile
css media query mobile

css media query are crucial in the sense that it is useful because they improve your site views and responsiveness to fit any mobile device or adapt to ascribed functions.

But that depends on a device’s general type (such as print vs. screen), most importantly on particular features and variables which are screen resolution or browser viewport width.

Media queries can be used to check many things, like:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the phone or tablet in landscape or portrait mode)
  • resolution

Using media queries are a welcomed technique for dispatching a well modified style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

You can as well use media queries to define that certain styles are only for printed documents or for screen readers (print, screen, or speech).

In inclusion to media types, you will also find media features.

Media features provide more certain facts to media queries, by permitting to test for a certain quality of the user agent or display device.

That is to say, you can apply styles to only those screens that are greater, or smaller, than a certain width.

More on media query syntax

A media query consists of an optional media type and any number of media feature expressions.

Multiple queries are often combined in various ways by using logical operators.

Media queries are case-insensitive.

Secondly, media query computes to true when the media type (if specified) matches the device on which a document is being displayed and every one media feature expressions compute as true.

Queries involving unknown media types are always false.

Media Types

Media types describe the overall category of a tool .

Except when using the not or only logical operators, the media type is optional and therefore the all type are going to be implied.

All

Very suitable for all media type devices.

Print

Intended for printers, i.e paged material and documents viewed on a screen in print preview mode.

screen

Used primarily for screens. e.g computer screens, tablets, smart-phones etc.

Speech

Used for speech components.

Media features

Media features explain certain features of the user agent, output device, or domain.

This Media feature expressions test for his or her presence or value, and are entirely optional. Each media feature appearance must be surrounded by deviation.

principlesspecification
any-hoverDoes any accessible input device permit the user to fly over elements? (added in Media Queries Level 4)
any-pointerIs any accessible input mechanism a pointing device, and if so, how valid is it? (added in Media Queries Level 4)
aspect-ratioRatio linking the width-to-height of the viewport
colorDigits of bits per color element of the output device
color-garmutEstimated range of colors that are carried by the user agent and output device (added in Media Queries Level 4)
color-indexDigits of colors the device can present
GridIf the device is a grid or bitmap or uses the screen
heightviewpoint’s height
hoverDoes the major input mechanism permit the user to hover over elements? (added in Media Queries Level 4)
Inverted-colorsIs the user agent or underlying OS inverting colors? (added in Media Queries Level 4)
light-levelcurrent light level of the environment (added in Media Queries Level 4)
OrientationOrientation of the viewpoint i.e portrait or landscape mode
overflow-blockHow does the output device operate content that floods the viewport along the block axis (added in Media Queries Level 4)
overflow-inlineCan content that floods the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointerIs the main input mechanism a pointing device, and if so, how valid is it? (added in Media Queries Level 4)
scanThe scanning process of the output device
scriptingchecks if scripting is available i.e javascript (added in Media Queries Level 4)
resolutionThe density of the output device, using dpi or dpcm
updateHow fast can the output device improve the appearance of the content (added in Media Queries Level 4)
widthwidth of the viewpoint

Logical operators

The logical operators not, and, and only are often accustomed to compose a posh media query.

You can also combine multiple media queries into one rule by separating them with commas.

and

The and operator is employed for combining multiple media features together into one media query, requiring each chained feature to return true so as for the query to be true.

It can also be used for connecting media features and media types.

not

The not operator is employed to negate a media query, returning true if the query would otherwise return false If present in a comma-separated list of queries, it will only negate the specific query to which it is applied.

If you employ the not operator, you want to also specify a media type.

only

The only operator is employed to use a method as long as a whole query matches, and is beneficial for preventing older browsers from applying selected styles.

When not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the rest of the query, and applying its styles on all screens.

If you employ the only operator, you want to also specify a media type.

(comma) ,

Commas are used to combine multiple media queries into a single rule.

Each query in a comma-separated list is treated separately from the others.

Thus, if any of the queries during a list is true, the whole media statement returns true. In other words, lists behave sort of a logical or operator.

Targeting media types

Media types describe the overall category of a specific device.

Albeit websites are commonly designed with screens in mind, you’ll also want to make styles that focus on special devices like printers or audio-based screen readers.

You can as well target different devices. for example, this @media rule uses two media queries to target both screen and print devices:

@media screen, print { ... }

Targeting media features

Media features describe the precise 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 to devices that are being used in low-light conditions.

This given instance put in styles when the user’s main input mechanism can hover over elements:

@media (hover: hover) { ... }

If a feature doesn’t work to the device on which the browser is running, appearance involving that media feature are always false.

For example, the styles nested inside the subsequent query will never be used, because no speech-only device features a screen aspect ratio:

@media speech and (aspect-ratio: 11/5) { ... }

Creating composite media queries

Sometimes you’ll want to make a media query that depends on multiple conditions.

I can say that this is the position the logical operators come in: not, and, and only.

Furthermore, you’ll combine multiple media queries into a comma-separated list; this enables you to use an equivalent styles in several situations.

In the previous instance, we’ve already seen the and operator used to a media type with a media feature.

The and operator also can combine multiple media features into one media query. The not operator, therefore, negates a media query, basically reversing its normal meaning. The only operator stops older browsers from trying the styles.

Combining multiple types or features

The and keyword links a media feature and a media type or other media features.

This instance combines two media features to limit styles to landscape-oriented devices with a width of a minimum of 30 ems:

@media (min-width: 30em) and (orientation: landscape) { ... }

if you want to regulate the styles to devices with a screen, you can bond the media features to the screen media type:

@media screen and (min-width: 30em) and (orientation: landscape) { ... }

Testing for multiple queries

You can use a comma-separated list to use styles when the user’s device matches anybody of varied media types, features, or states.

For instance, the subsequent rule will apply its styles if the user’s device has either a minimum height of 680px or may be a screen device in portrait mode:

@media (min-height: 680px), screen and (orientation: portrait) { ... }

Concerning the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply.

Also, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

Improving compatibility with older browsers

The only keyword averts older browsers that is not compatible to media queries and media features from applying the given styles. It does not affect modern browsers.

@media only screen and (color) { ... }

Syntax improvements in Level 4

The Media Queries Level 4 specification includes some syntax enhancement to make media queries using features that have a “range” type, for example width or height, less verbose.

Level 4 adds a range context for writing such queries. For instance, using the max- function for width we might write the following:

@media (max-width: 40em) { ... }

In Media Queries Level 4 it can be written as this:

@media (width <= 40em) { ... }

In using min- and max- we might test for a width linking two values as follows:

@media (min-width: 20em) and (max-width: 60em) { ... }

It will convert to the Level 4 syntax as:

@media (20em <= width <= 60em ) { ... }

Media Queries Level 4 also include styles to link media queries using full boolean algebra with and, not, and or.

Negating a quality with not

Using not() around a media feature negates that feature within the query. For instance, not(hover) would fit if the device had no hover ability:

@media (not(hover)) { ... }

Testing for multiple quality with or

You can use or to test for a match between more than one quality, resolving to true if any of the quality are pure.

For instance, the following query tests for devices that have a monochrome display or hover ability:

@media (not (color)) or (hover) { ... }

That is all you need to know about CSS Media Query.

LEAVE A REPLY

Please enter your comment!
Please enter your name here