Media query for mobile development

Media query for mobile development

What is a media query?

Media Query is a new syntax of CSS3.

• Using @media query, you can define different styles for different media types
• @media can set different styles for different screen sizes
• When you reset the browser size, the page will be re-rendered according to the width and height of the browser
• Media queries are currently used for many Apple phones, Android phones, tablets and other devices

Media query syntax

• Pay attention to the @ symbol at the beginning of @media
• mediatype media type
• and|not|only: or (means that two conditions are met at the same time); not (means that the latter conditions are not met); only (can be executed only under the latter conditions)
• media feature: Note that the parentheses must be present to indicate media features (device conditions)

grammar

@media mediatype and|not|only (media feature) {
    
    
    CSS-Code;
}

usage

// 1.在css语句中使用
@media screen and (max-width: 400px) {
    
    
    // 这里写你在当前条件下想要展示的样式
            .inner {
    
    
                height: 100px;
                width: 25%;
                background-color: brown;
            }
        }

// 2.在引入css样式的link语句中写入
// 表示在符合的条件下引入
<link rel="stylesheet" media="screen and (max-width: 400px)" href="mystylesheet.css">

mediatype value

mediatype divides different terminal devices into different types, called media types

• all: for all devices

• print: for printer and print preview

• screen: used for computer screens, tablets, smart phones, etc.

• speech: applied to screen reading sound equipment

and|not|only (keyword)

• Keywords connect media types or multiple media characteristics together as conditions for media queries.

media feature value

aspect-ratio	Define the ratio of the width to the height of the visible area of ​​the page in the output device
color	Define the number of color originals in each set of output device. If it is not a color device, the value is equal to 0
color-index	Defines the number of entries in the color lookup table of the output device. If no color lookup table is used, the value is equal to 0
device-aspect-ratio	Define the ratio of the visible width to the height of the screen of the output device.
device-height	Define the visible height of the output device's screen.
device-width	Define the visible width of the screen of the output device.
grid	Used to query whether the output device uses raster or dot matrix.
height	Define the height of the visible area of ​​the page in the output device.
max-aspect-ratio	Define the maximum ratio of the visible width to the height of the screen of the output device.
max-color	Define the maximum number of color originals for each set of output device.
max-color-index	Define the maximum number of entries in the color lookup table of the output device.
max-device-aspect-ratio	Define the maximum ratio of the visible width to the height of the screen of the output device.
max-device-height	Define the maximum height of the output device's screen.
max-device-width	Define the maximum visible width of the screen of the output device.
max-height	Define the maximum visible area height of the page in the output device.
max-monochrome	Define the maximum number of monochrome originals contained in each pixel in a monochrome frame buffer.
max-resolution	Define the maximum resolution of the device.
max-width	Define the maximum visible area width of the page in the output device.
min-aspect-ratio	Define the minimum ratio of the width to the height of the visible area of ​​the page in the output device.
min-color	Define the minimum number of color originals for each set of output device.
min-color-index	Defines the minimum number of entries in the color lookup table of the output device.
min-device-aspect-ratio	Defines the minimum ratio of the visible width to the height of the screen of the output device.
min-device-width	Define the minimum visible width of the screen of the output device.
min-device-height	Defines the minimum visible height of the screen of the output device.
min-height	Define the minimum visible area height of the page in the output device.
min-monochrome	Define the minimum number of monochrome originals contained in each pixel in a monochrome frame buffer
min-resolution	Define the minimum resolution of the device.
min-width	Define the minimum visible area width of the page in the output device.
monochrome	Define the number of monochrome originals contained in each pixel in a monochrome frame buffer. If it is not a monochrome device, the value is equal to 0
orientation	Define whether the height of the visible area of ​​the page in the output device is greater than or equal to the width.
resolution	Define the resolution of the device. Such as: 96dpi, 300dpi, 118dpcm
scan	Define the scanning process of TV equipment.
width	Define the width of the visible area of ​​the page in the output device.

Media query writing rules

• In order to prevent confusion, we have to write media queries in ascending or descending order, but our favorite is to write them in ascending order, so that the code is more concise
• Use media queries to adapt different screens to different styles, and find the law can be abbreviated as judgment
• The principle is to use the style that will be stacked in the back

note:

• In the mobile terminal development, we must master media query + rem to achieve dynamic size changes of elements