CSS Media Query

Source: Internet
Author: User

1, what is the media query

Media queries allow us to set CSS styles based on the features of the device display, such as viewport width, screen scale, device orientation: Landscape or portrait, and media queries consist of media types and one or more conditional expressions that detect media characteristics. The media features available for detection in media queries are width, height, and color (and so on). With media queries, you can customize the display for certain output devices without changing the content of the page.

2, why responsive design needs, media inquiries
If you do not have a CSS3 media query module, you cannot set a specific CSS style for device features such as viewport width

3, how to introduce the media query in the CSS file

Media queries are written at the end of CSS style code, CSS is cascading style sheets, under the same particularity, the back style will overlap the previous style

4. How to use media


The first thing you need to do is add the following code to your HTML document that is compatible with the display of your mobile device

<meta name= "Viewport content=" Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no "/>


Width=device-width: Width equals width of current device

Initial-scale=1: Initial zoom ratio (default = 1)

Maximum-scale=1: Allows the user to zoom to the maximum scale (default is 1)

User-scalable=no: User cannot manually scale

Ii. How to write CSS Responsive media query in CSS file


@media screen and (max-width:720px) and (min-width:320px) {




@media screen and (max-width:320px) {





PS: This section of media query means: When the device screen width between 320px--720px, media query body background color (background-color:red; ) will overlap before the body background color, when the device screen width is below 320px, the body of the media query body background color (background-color:blue; ) will overlap before the body background color

CSS Media Query

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.