媒体查询--基础

1.什么是媒体查询 media query

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

            body {

                background-color: red;

            }

 2. 为什么需要媒体查询

• 一套样式不可能适应各种大小的屏幕
• 针对不同的屏幕大小写样式
•  让我们的页面在不同大小的屏幕上都能正常显示

3.媒体类型

 all(default)

@media (min-width: 900px) { 可以省略 and

            body {

                background-color: red;

            }

screen / print / speech

@media print and (min-width: 900px) {

            body {

                background-color: red;

            }

 4. 媒体查询中的逻辑

a.与( and )

@media screen and (min-width: 900px) and (max-width: 1024px) {

            body {

                background-color: red;

            }

  }

b.或( , )

@media screen and (min-width: 1024px), (max-width: 900px) {

            body {

                background-color: red;

            }

        }

@media screen and (min-width: 1024px), screen and (max-width: 900px) {

            body {

                background-color: red;

            }

        }

c.非( not )

@media not screen and (min-width: 900px) and (max-width: 1024px) {

            body {

                background-color: red;

            }

        }

@media not screen and (min-width: 1024px), screen and (max-width: 900px) {

            body {

                background-color: red;

            }

        }

5. 媒体特征表达式

width/max-width/min-width

-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio

orientation

     landscape/portrait

@media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {

            body {

                background-color: red;

            }

        }

height

device-width/device-height

    screen.width/screen.height

aspect-ratio 视口的宽高比