Responsive design-media Query

Source: Internet
Author: User

Media Query

Media query only supports ie9 +, chrome, ff, and other browsers. Browsers under IE8 can download and reference respond. js,

Statement:

<! -- [If lt ie 9]>
<SCRIPT src = "respond. js"> </SCRIPT>
<! [Endif] -->

Attributes that can be detected by media queries:
1. Width: width
2. Height
3. device-width: Specifies the surface width (for us, the screen width of the device)
4. device-Height: rendering the surface height (for us, the screen height of the device)
5. Orientation check whether the device is in the horizontal or vertical direction
6. aspect-ration is based on the aspect ratio of the viewers' width and height.
A ratio display can be defined as aspect-ration: 16/9;
7. device-aspect-Ration Based on the aspect ratio of the device rendering plane
8. The number of BITs in each color, for example, Min-color: 16, checks whether the device has a 16-bit color.
9. Number of colors in the color-index device color index table. The value must be a non-negative integer.
10. monochrome checks the number of digits used by each pixel in the monochrome frame buffer. The value must be a non-negative integer.
11. Resolution is used to detect the screen or printer resolution, for example, Min-resolution: 300 dpi,
It can also accept the measurement value of pixel points per centimeter, for example, Min-resolution: 118 DPCM;
12. Scan the TV set
Progressive row-by-row Scan
Interlace Line Scan
For example, a 720 p hd TV (P indicates a row-by-row scan) matches scan: progressive.
1080i hd TV (I indicates interlace scan) matching scan: interlace
13. The grid is used to check whether the output device is a network device or a bitmap device.

1-11 can have Min-And Max-to create a query range, while 12-13 does not

Statement:

1. Check whether the media attribute on the link is loaded and changed to CSS.

Eg:<LINK rel = "stylesheet" type = "text/CSS" Media = "screen and orientation: Portrait" href = "CSS/__style.css"/>

Orientation: Portrait means that the display is vertical, yes, loading and changing CSS
Not at the beginning of a media query. The query logic is reversed.
And is and |
, Or
  2. CSS file external link CSS file

@ Import URL ("phone.css") screen and (max-width: 360px);/* load when the maximum screen width is less than 360px */
3. Direct Writing:

@ Media screen and (max-width: 980px ){
Body {
Background: # f0f;
Font-size: 12px;
}
}

 

Responsive design-media Query

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.