Media query, Media

Media query, Media

Due to work requirements, you need to adapt a page to different display devices and start to learn about media queries. Although you have heard this news before, you have never learned it systematically. Today, I will share my learning achievements with you, some of them are extracted from the Internet and have their own understanding. If there are any deficiencies, I hope you can point out that I will modify them. After talking nonsense, go to the topic. Nowadays, various display devices, whether on mobile phones or computers, have a headache for developers. So if we want to adapt the pc page to other devices such as mobile phones at the same time, our responsive design will be born. The main method to implement responsive design is to use css for media queries.

1. What is media query?

Media query allows us to set different CSS styles for different displays (such as the width of the display, the ratio of the screen, and the direction of the device: horizontal or vertical, A media query consists of a media type and one or more conditional expressions that detect media features (a media query has its own specific expression syntax ). Media queries can be used to detect media features such as width, height, and color ). Media queries allow a set of codes to adapt to multiple devices.

2. Media query example

From css version 2, you can obtain media support in css by media type. Insert the following code into the head Tab Of the HTML page:

<Link rel = "stylesheet" type = "text/css" media = "screen" href = "style.css">

However, the biggest drawback of the above method is that it will increase the number of http requests on the page and increase the burden on the page. Therefore, it is best to write styles in a file using css3. First, you must add the following code in the html document to ensure compatibility with the display effects of mobile devices:

<Meta name = "viewport content =" width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no "/>

Let's explain the role of attributes:

Width = device-width: the width is equal to the width of the current device.

Initial-scale = 1: initial scaling ratio (1 by default)

Maximum-scale = 1: allows users to zoom to the maximum ratio (1 by default)

User-scalable = no: users cannot manually Scale

Next, let's take a look at the specific implementation method. If some syntaxes are not understood, please don't worry. I will explain them later.

// When the browser size is smaller than 960px

@ Media screen and (min-width: 960px ){

Body {

Background: # dcdcdc;

}

}

// The time code when the browser size is between 960px --- 1000px

@ Media screen and (min-width: 960px) and (max-width: 1000px ){

Body {

Background: yellow;

}

}

// When the browser size is greater than 1000px

@ Media screen and (max-width: 1000px ){

Body {

Background: red;

}

}

Media attributes that contain one or more expressions are parsed to be true or false. If the media type in the media query matches the device to be displayed in the document, the query result is true, and all expressions in the media query are true. The above is to write the style directly in the style sheet, we can also use the link element to introduce, the following code:

<Link rel = "stylesheet" media = "(max-width: 800px)" href = "example.css"/>

If you use the link element, the style sheet will be downloaded even if the media query returns false, but it will not be referenced.

Media attributes that contain one or more expressions are parsed to be true or false. If the media type in the media query matches the device to be displayed in the document, the query result is true, and all expressions in the media query are true.

Note: If you use the link element, the style sheet will be downloaded even if the media query returns false, but will not be referenced.

3. logical operators

• The and operator is used to combine multiple media attributes into a single media query. The query result is true only when each attribute is true. For example:

(Min-width: 700px) and (orientation: landscape ){...}

• The not operator is used to reverse the results of a media query. The not keyword can only be applied to the entire query, but not to an independent query. For example, not is finally calculated in the following query:

@ Media not all and (monochrome ){...}

Equivalent to: @ media not (all and (monochrome )){...}

Instead of: @ media (not all) and (monochrome ){...}

• The only operator indicates that the specified style is applied only when the media query matches successfully. It can be used to prevent selected styles from being applied in old-fashioned browsers. If the not or only operator is used, a media type must be specified explicitly.

<Link rel = "stylesheet" media = "only screen and (color)" href = "example.css"/>

• You can also separate multiple media queries with commas (,). If either of them is true, the entire media statement returns true. It is equivalent to the or operator. Each query in the comma-separated list is independent. The operator in one query does not affect other media queries. This means that the comma (,) Media query list can act on different media attributes, types, and statuses. For example, if you want to apply a set of styles on a handheld device with a minimum width of 700 pixels or a horizontal screen, you can write as follows:

@ Media (min-width: 700px), handheld and (orientation: landscape ){...}

Note: If the not or only operator is not used, the media type is optional. The default value is all.

4. Media attributes

Most media attributes are prefixed with "min-" and "max-" to express "greater than or equal to" and "less than or equal ". This avoids the use of "<" and ">" characters that conflict with HTML and XML. If you do not specify a value for the media property and the actual value of this feature is not zero, the expression is parsed to true.

• Color)

Whether to accept the min/max Prefix: Yes

Specify the bit value of each pixel unit of the output device. If the device does not support the output color, the value is 0. NOTE: If each color unit has a different number of BITs, the minimum value is used.

For example, if a display provides 5 bits for blue and red while 6 bits for green, each color unit is considered to have 5 bits. If the device uses the index color, the minimum bits of the color units in the color table are used.

Example

Apply a style sheet to all devices that can display colors:

@ Media all and (color ){...}

Apply a style sheet to a device with at least 4 bits per color unit:

@ Media all and (min-color: 4 ){...}

• Color index)

Whether to accept the min/max Prefix: Yes

Specifies the number of entries in the color query table of the output device.

Example

Apply a style sheet to all devices that use indexed colors. You can do this:

@ Media all and (color-index ){...}

Apply a style sheet to all devices that use at least 256 indexed colors:

<Link rel = "stylesheet" media = "all and (min-color-index: 256)" href = "http://foo.bar.com/stylesheet.css"/>

• Aspect-ratio)

Whether to accept the min/max Prefix: Yes

Describes the aspect ratio of the target display area of the output device. This value contains two positive integers separated. Represents the ratio of the number of horizontal workers (the first value) to the number of vertical workers (the second value. In the following example, a special style sheet is selected for devices whose area width and height are at least one to one.

@ Media screen and (min-aspect-ratio: 1/1 ){...}

This specifies the aspect ratio or greater. In other words, the visible area is either a square or a wide screen. Whether device-aspect-ratio accepts the min/max Prefix: Specifies the aspect ratio of the output device. This value contains two positive integers separated. Represents the ratio of the number of horizontal workers (the first value) to the number of vertical workers (the second value.

Example

A special style sheet is selected for the wide screen device.

@ Media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10 ){...}

Aspect Ratio: Or.

• Device-height)

Whether to accept the min/max Prefix: Yes

The height of the output device (the height of the entire screen or page, rather than the rendering area just like the document window ).

Example

Apply a style sheet to the document displayed on the screen with a maximum width of PX. You can do this:

<Link rel = "stylesheet" media = "screen and (max-device-width: 799px)"/>

• Device-width)

Whether to accept the min/max Prefix: Yes

The width of the output device (the height of the screen or page, rather than the rendering area just like the document window ).

• Height)

Whether to accept the min/max Prefix: Yes

The height media property describes the height of the rendering area of the output device (such as the height of the visible area or the height of the printer tray.

Note: After you adjust the window size, Firefox will switch the appropriate style sheet based on the media queries using the width and height attributes.

• Orientation)

Whether to accept the min/max Prefix: No

Specifies whether the device is in landscape (width greater than width) or landscape (height greater than width) mode.

Example

Apply the style sheet to the portrait screen:

@ Media all and (orientation: portrait ){...}

• Resolution)

Whether to accept the min/max Prefix: Yes

Specify the resolution (pixel density) of the output device ). Resolution can be expressed by the number of points per inch (dpi) or centimeter (dpcm.

Example

Apply a style for a printer at most 300 points per inch:

@ Media print and (min-resolution: 300 dpi) {...} replace the old one (min-device-pixel-ratio: 2)

Syntax:

@ Media screen and (min-resolution: 2 dppx ){...}

• Width)

Whether to accept the min/max Prefix: Yes

The width media property describes the width of the rendering area of the output device (such as the width of the visible area or the width of the printer tray.

Note: After you adjust the window size, Firefox will switch the appropriate style sheet based on the media queries using the width and height attributes.

Example

If you want to apply a style sheet to a handheld device with a minimum width of 20 em, you can use the following query:

@ Media handheld and (min-width: 20em), screen and (min-width: 20em ){...}

This media query will apply a style sheet to a printer with a minimum width of 8.5 inch:

<Link rel = "stylesheet" media = "print and (min-width: 8.5in)" href = "http://foo.com/mystyle.css"/>

This query applies to screens with a width between PX and PX:

@ Media screen and (min-width: 500px) and (max-width: 800px ){...}