1、常见的设备类型和宽度
超小屏幕 手机 (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面显示器 (≥992px)
大屏幕 大桌面显示器 (≥1200px)
2、如何让网页兼容所有设备?
使用媒体查询做断点,根据不同的分辨率做不同的页面css的设置.
3、如何使用?
@media 媒体类型 and (属性设置) { //定义样式 }
3-1. 媒体类型
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备
3-2. 媒体功能
max-width 最大宽度
min-width 最小宽度
@media screen and (max-width: 415px) {
.media-max {
display: none;
}
.media-min {
width: 100%;
}
}
@media screen and (min-width: 415px) {
.media-min {
display: none;
}
.media-max {
width: 100%;
}
}
为打印机做一个样式
@media print {
#outerBox{
font-size: 50px;
}
}
