Media query adaptation

Media query

Media query ： Based on one or more device types 、 Specific characteristics and environment to apply styles

1、 Media type
2、 Media features
3、 Logical operators

Media type

all All devices
print Printer devices
screen Colorful computer screen
speech Auditory equipment （ For people with visual impairment , A device that can present the content of a page in the form of voice ）

Be careful ：tty、tv、projection、handheld、braille、embossed、aural And other types of media queries 4 Has been abandoned

Media features

One 、width Width

1. min-width Minimum width , The width can only be larger than this
2. max-width Maximum width , The width can only be smaller than this

Two 、height Height

1. min-height Minimum height , The height can only be larger than this
2. max-height Maximum height , The height can only be smaller than this

3、 ... and 、orientation Direction
landscape Horizontal screen ( The width is greater than the height )
portrait Jianping ( The height is greater than the width )
aspect-ratio Width ratio
-webkit-device-pixel-ratio Pixel ratio (webkit Private properties of the kernel )

/* 400-500 Is the default  */
div {
    
    width: 100px;
    height: 100px;
    background: red;
}

/*  The screen size is larger than 500 I'll be satisfied when I'm in  */
@media (min-width: 500px) {
    
    div {
    
        background: green;
    }
}

/*  The screen size is smaller than 400 I'll be satisfied when I'm in  */
@media (max-width: 400px) {
    
    div {
    
        background: blue;
    }
}

/*  When the screen is horizontal  */
@media (orientation: landscape) {
    
    div {
    
        width: 400px;
        height: 100px;
    }
}

/*  When the screen is vertical  */
@media (orientation: portrait) {
    
    div {
    
        width: 100px;
        height: 400px;
    }
}

/*  Is the aspect ratio 4：3 I'll be satisfied when I'm in ,800*600 The time is 4：3 */
@media (aspect-ratio: 4/3) {
    
    div {
    
        border: 10px solid #000;
    }
}

/*  When the pixel ratio is 2 When , Satisfy  */
@media (-webkit-device-pixel-ratio: 2) {
    
    div:after {
    
        content: ' Chen Xuehui ';
        font-size: 50px;
    }
}

Logical operators ： Used to make conditional judgment

and        Merge multiple media queries （ And it means ）
,          Configure a media query （ Or it means ）
not        Negate the media query results 
only       Apply styles only after the media query matches successfully （ Guard against old browsers ）

When the screen size meets several conditions at the same time , It's going to take the maximum

div {
    
    width: 200px;
    height: 200px;
    background: red;
}

/*  The size ratio of the screen 700 When the screen is large and horizontal  */
@media all and (min-width: 700px) and (orientation: landscape) {
    
    div {
    
        background: green;
    }
}

/*  Screen size ratio 800 Small , Or when the screen is horizontal  */
@media (max-width: 800px), (orientation: landscape) {
    
    div {
    
        background: pink;
    }
}

/*  The size of the screen should be larger than 800 When , The whole is satisfied  */
@media not all and (max-width: 800px) {
    
    div {
    
        background: blue;
    }
}

@media only screen and (min-width: 1000px) {
    
    div {
    
        background: grey;
    }
}

Media query application

div {
    
    padding: 50px 0;
    border: 1px solid #000800;
}
div:after {
    
    content: ' This is a house ';
}

/*  Less than 1000 Size is enough  */
@media all and (max-width: 1000px) {
    
    div {
    
        background: green;
    }
    div:after {
    
        content: ' wow , The house is so big , You can put down the pit ';
    }
}

/*  Less than 800 Be satisfied when  */
@media all and (max-width: 800px) {
    
    div {
    
        background: khaki;
    }
    div:after {
    
        content: ' oh , The house has become smaller , Only one double bed can be put ';
    }
}

/*  Size less than 500 Just be satisfied  */
@media all and (max-width: 500px) {
    
    div {
    
        background: hotpink;
    }
    div:after {
    
        content: ' Ah , The house is smaller , Only one single bed can be put down ';
    }
}

/*  Less than 300 I'll be satisfied when I'm in  */
@media all and (max-width: 300px) {
    
    div {
    
        background: turquoise;
    }
    div:after {
    
        content: ' Why , The house is too small , The bed can't fit ';
    }
}

media Media query from mobile terminal to PC End to end adaptation

/*  Less than 768 ipad*/
@media screen and (max-width: 768px) {
    
    html {
    
        font-size: 18px;
    }
}
/* Less than  480px  mobile phone */
@media screen and (max-width: 480px) {
    
    html {
    
        font-size: 16px;
    }
}

/*768-1023*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
    
    html {
    
        font-size: 20px;
    }
}
/*1024-1279*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    
    html {
    
        font-size: 24px;
    }
}
/*1280-1440*/
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    
    html {
    
        font-size: 26px;
    }
}

/*>=1440 Device screen for */
@media screen and (min-width: 1440px) {
    
    html {
    
        font-size: 28px;
    }
}
/*>=1920 Device screen for */
@media screen and (min-width: 1920px) {
    
    html {
    
        font-size: 34px;
    }
}

/* PC End  */
/* >=1920px */
@media (min-width: 1921px) {
    
    html {
    
        font-size: 30px;
    }
}

@media (max-width: 1920px) {
    
    html {
    
        font-size: 26px;
    }
}

@media (max-width: 1600px) {
    
    html {
    
        font-size: 24px;
    }
}

@media (max-width: 1440px) {
    
    html {
    
        font-size: 22px;
    }
}

@media (max-width: 1280px) {
    
    html {
    
        font-size: 20px;
    }
}

@media (max-width: 1024px) {
    
    html {
    
        font-size: 18px;
    }
}

/*  Mobile  */
@media (max-width: 999px) {
    
    html {
    
        font-size: 20px;
    }
}
@media (max-width: 759px) {
    
    html {
    
        font-size: 20px;
    }
}
@media (max-width: 376px) {
    
    html {
    
        font-size: 20px;
    }
}

@media screen and (min-width: 1441px) {
    
}

@media screen and (min-width: 1510px) {
    
}

@media screen and (min-width: 1600px) {
    
}

@media screen and (min-width: 1680px) {
    
}

@media screen and (min-width: 1920px) {
    
}

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

// Mobile terminal 
@media screen and (max-width: 900px) {
    
}

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