自适应(响应式)网页中的几个关键分辨率

发布时间 2023-06-15 14:16:16作者: loganfan
@media and (min-width: 1200px) {
    //>=1200px的设备
}
@media and (min-width: 960px) and (max-width:1199px) {
    //<=1199px and >=960px的设备:PC端
}
@media and (min-width: 768px) and (max-width:959px) {
    //<=959px and >=768px的设备:PC端
}
@media and (min-width: 640px) and (max-width:767px) {
    //<=767px and >=640px的设备:平板端或者手机横屏
}
@media and (min-width: 480px) and (max-width:639px) {
    //<=639px and >=480px的设备:手机横屏
}
@media and (min-width: 320px) and (max-width:479px) {
    //<=479px and >=320px的设备:手机竖屏
}
@media and (min-width: 240px) and (max-width:319px) {
    //<=479px and >=320px的设备:手机竖屏
}
@media and (max-width: 239px) {
    //<=239px的设备:手机竖屏
}