移动开发-媒体查询

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29412527/article/details/81060045

CSS3中的Media Query（媒介查询）

通过查询screen的宽度来指定某个宽度区间的网页布局。

• 超小屏幕（移动设备） 768px以下
• 小屏设备 768px-992px
• 中等屏幕 992px-1200px
• 宽屏设备 1200px以上

媒体类型

将不同的终端设备划分为不同的类型，称为媒体类型

• screen——用于电脑屏幕，平板电脑，智能手机等
• print——用于打印机和打印预览
• all——用于所有设备

媒体特性：

• width/height：完全等于layout viewport
• min-width/height:小于等于layout viewport
• max-width/height:大于等于layout viewport
• device-width/height:完全等于ideal viewport
• aspect-ratio:页面可见区域宽高比
• device-aspect-ratio:设备屏幕可见区域宽高比

关键字：

and——可以将多个媒体特性连接到一起，且
not——排除某个媒体类型，非（可省略）
only——指定某个特定的媒体类型（可省略）

引入方式

1、link方法

<link href="1.css" media="only screen and (max-width: 320px)">

2、@media方法（写在CSS里）

<style>
@media screen and (min-width:1200px){
        /*书写CSS代码*/
    }

@media screen and (min-width: 992px) and (max-width: 1170px){
.container {
            background-color: red;
            width: 1170px;
        }
    }


/* 简写： */
@media (max-width: 1200px) {
        .container{
            background: blue;
            width: 970px;
        }
    }

</style>