Media queries for CSS responsive layout

In actual projects, you will always encounter the problem of responsive layout. If you have not used some responsive UI framework, then you will generally use media queries to implement responsive layout. Since I encounter it so often, I think it is necessary to summarize it a little bit.

The first thing we need to understand is that when using media queries, when the browser size is reset, the page will be re-rendered according to the width and height of the browser.

1. About meta

Before using media queries, you need to use the setting to be compatible with the display effect of mobile devices, so first understand briefly Let’s talk about the tag in html.

This tag is usually placed inside the head tag and is used to provide meta-information (meta-information) about an HTML element, such as description, keywords for search engines, and refresh frequency.

The settings for media queries are as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Parameter description:

1. The name attribute provides the name in the name/value pair. name="viewport" means the setting of the window, in addition to the viewport.

2. The content attribute provides the value in the name/value pair. The value can be any valid string, and content is based on the content. It should always be used together with the http-equiv or name attribute to provide them with Definition of the values ​​associated with it. Content value description:

width = device-width: width is equal to the width of the current device;

initial-scale: initial scaling (default setting is 1.0);

minimum-scale: The minimum ratio that users are allowed to zoom to (default setting is 1.0);

maximum-scale: The maximum ratio that users are allowed to zoom to (default setting is 1.0);

user -scalable: Whether the user can manually zoom (default is no, because we don't want users to zoom in and out of the page).

For more in-depth understanding of , please refer to: http://www.w3school.com.cn/tags/tag_meta.asp

2. Media query implementation method

1. Directly determine the size of the device in the link, and then reference different external css files. For example:

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

When the screen is larger than 400px, the external css style file media_1.css is referenced.

2. When setting the css style, set @media directly after it. For example:

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

This is a media query implemented using CSS3. In fact, media query is essentially a style overlay.

3. CSS3 media query

1. Basic syntax

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2. Keywords

only: Specify a specific media type, you can use to exclude browsers that don't support media queries.

not: Exclude a specified media type.

The use of keywords is often used for devices that do not support media features but support media types

3. Media type

Media type describes the general description of the device Categories, media types are optional and the all type will be implicitly used unless the not or only keywords are used.

Value	Description
all	For all multimedia type devices
print	For printers
#screen	For computer screens, tablets, smartphones, etc.
speech	For screen readers

All browsers support the value "screen", "print" and "all" media attributes.

4. Commonly used media functions

The following only lists some media functions that may be slightly commonly used:

height defines the height of the visible area of ​​the page in the output device.

width defines the width of the visible area of ​​the page in the output device.

max-height defines the maximum visible area height of the page in the output device.

max-width defines the maximum visible area width of the page in the output device.

min-height defines the minimum visible area height of the page in the output device.

min-width defines the minimum visible area width of the page in the output device.

device-height defines the visible height of the screen of the output device.

device-width defines the visible width of the screen of the output device.

max-device-height Defines the maximum height visible on the screen of the output device.

max-device-width defines the maximum visible width of the screen of the output device.

orientation Detects whether the device is currently in landscape or portrait orientation.

4. Setting the actual common sizes

The following only lists some common screen sizes, but settings of greater than, less than, and equal to are also implemented.

    /* 屏幕尺寸大于960px时（普通彩色屏幕） */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时（MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

Note: Due to the style coverage problem of CSS, during actual setting, if the same element needs to be set to several different sizes, you need to pay attention to the order issue, such as: min- When it comes to width, put the small ones on top and the big ones on the bottom. Similarly, if you use max-width, then the big ones are on top and the small ones are on the bottom.

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of Media queries for CSS responsive layout. For more information, please follow other related articles on the PHP Chinese website!