屏幕尺寸及媒体查询常见用法

---

一、常用的屏幕大小

1、PC端

分辨率	比例	设备尺寸
1024*500	——	8.9寸
1024*768（网页-最小尺寸）	4:3	10.4寸、12.1寸、14.1寸、15寸
1280*800（网页-小尺寸）	16:10	15.4寸
1280*1024	5:4	14.1寸、15寸
1280*854	15:10	15.2寸
1366*768（网页-最常见尺寸）	16:9	——
1440*900（网页-中尺寸）	16:10	17寸，仅苹果用
1440*1050	5:4	14.1寸、15.0寸
1660*1024	14:9	——
1660*1200	4:3	15寸、16.1寸
1680*1050	16:10	15.4寸、20寸
1920*1080（网页-大尺寸）	16:9	21.5寸、23寸、27寸

2、移动端

型号	分辨率
iPhone 5	320*568
iPhone 6/7/8	375*667
iPhone 6/7/8 Plus	414*736
iPhone X	375*812
iPhone XR，iPhone XS Max	414*896
iPhone 12/13 mini	375*812
iPhone 12/13 (Pro)	390*844
iPhone 12/13 pro Max	428*926
Nexus 5	360*640
Nexus 5X	411*731
Nexus 6	412*732
Mac 13-inch and below	375*667
Mac 15-inch	375*736
Mac 21-inch and above	414*896
iPad	768*1024
iPad Pro 10.5-inch	834*1112
iPad Pro 12.9-inch	1024*1366

二、媒体查询

使用媒体查询，可以实现响应式布局，即根据页面的宽度，显示其对应的界面效果。
在iframe中，子页面使用媒体查询，其宽度是按照子页面宽度来进行响应的，不是根据父页面的宽度进行响应。

1、媒体类型

样式应用于哪种类型的设备上

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕、平板电脑、智能手机等
speech	应用于屏幕阅读器等发声设备

/* 举例 */
@media screen {
    .test-style {
        font-size: 14px;
    }
}
@media print {
    .test-style {
        font-size: 10px;
    }
}

2、根据不同的媒体使用不同的样式文件

<!-- 宽度大于 970px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 970px)" href="max.css">
<!-- 宽度小于或等于 750px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 750px)" href="min.css">

3、max-width

宽度小于等于xx尺寸时，执行其对应样式。注：按照宽度大小，从大到小的顺序写。如下：

/* 宽度大于400px */
.main {
    width: 100%;
    height: 500px;
    background: black;
}
/* 宽度小于等于400px */
@media screen and (max-width:400px) {
    .main {
        background: greenyellow;
    }
}
/* 宽度小于等于300px */
@media screen and (max-width:300px) {
    .main {
        background: paleturquoise;
    }
}
/* 宽度小于等于200px */
@media screen and (max-width:200px) {
    .main {
        background: red;
    }
}

相当于：
宽度<= 200, background: red
200<宽度<= 300, background: paleturquoise
300<宽度<=400, background: greenyellow
宽度>400, background: black

4、min-width

宽度大于等于xx尺寸时，执行其对应样式。注：按照宽度大小，从小到大的顺序写。如下：

/* 宽度小于200px */
.main {
    width: 100%;
    height: 500px;
    background: rosybrown;
}
/* 宽度大于等于200px */
@media screen and (min-width:200px) {
    .main {
        background: royalblue;
    }
}
/* 宽度大于等于400px */
@media screen and (min-width:400px) {
    .main {
        background: peru;
    }
}
/* 宽度大于等于500px */
@media screen and (min-width:500px) {
    .main {
        background: plum;
    }
}

相当于：
宽度>=500, background: plum
400<=宽度<500, background: peru
200<=宽度<400, background: royalblue
宽度<200, background: rosybrown

5、运行效果

媒体查询，max-width，min-width