html:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../css/reset.css">
    9.     <link rel="stylesheet" href="../css/144媒体查询.css">
    10. </head>
    11. <body>
    13. </body>
    14. </html>

    css:
    （1）当要包含多个判断条件时，分别用and隔开，且and左右都要有空格，且判断条件与all等也要有and隔开
    （2）min-width;表示最小宽度，max-width:表示最大宽度
    （3）,表示或这个条件 @media all and (min-width:500px) , (max-width:800px) //表示大于500 或者小于800都满足
    （4）样式的分异点，我们称其为断点，也就是网页的样式会在这个点时发生变化
    -般比较常用的断点
    小于768超小屏幕max-width=768px
    大于768小屏幕
    min-width= 768px
    大于992中型屏幕mnin-width-992px
    大于1200大屏幕
    min-wi dth=1200px

    @media all and (min-width:500px) , (max-width:800px) {
    body {
        background-color: #bfa;
    }
}

    image.png