媒体查询

响应式 Web 设计 - 媒体查询 @media

 

响应式 Web 设计 - 媒体查询

• @media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面
• 媒体类型
• all   用于所有设备
• print    用于打印机和打印预览
• screen   用于电脑屏幕，平板电脑，智能手机等。
• speech  应用于屏幕阅读器等发声设备
•  媒体功能
• min-width   定义输出设备中的页面最小可见区域宽度。
• max-width   定义输出设备中的页面最大可见区域宽度。
• device-height  定义输出设备的屏幕可见高度。
• device-width   定义输出设备的屏幕可见宽度。
• orientation   定义输出设备中的页面可见区域高度是否大于或等于宽度。
• portrait （竖屏）| landscape（横屏）
• portrait：指定输出设备中的页面可见区域高度大于或等于宽度
• landscape： 除portrait值情况外，都是landscape

<style>
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        /* 当页面分辨率大于768时,颜色为greenyellow,宽为800px,高为800px */
        /* @media screen and (min-width: 768px) {
            div {
                background: greenyellow;
                width: 800px;
                height: 800px;
            }
        } */


        /* 当页面分辨率小于768时,颜色为greenyellow,宽为800px,高为800px */
        /* @media screen and (max-width: 768px) {
            div {
                background: greenyellow;
                width: 800px;
                height: 800px;
            }
        } */


        /* 当页面分辨率小于768时,颜色为蓝色, 当页面分辨率在768到1200之间颜色为绿色,宽400高400,当页面分辨率大于1200时,颜色为粉色,宽为1200*/
        @media screen and (min-width: 768px) and (max-width:1200px) {
            div {
                background: green;
                width: 400px;
                height: 400px;
            }
        }

        @media screen and (max-width: 768px) {
            div {
                background: blue;
            }
        }

        @media screen and (min-width: 1200px) {
            div {
                background: hotpink;
                width: 600px;
            }
        }
    </style>