一、常用的屏幕大小
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 | 用于所有设备 |
用于打印机和打印预览 | |
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