常用的屏幕分辨率区间
PC端一般常用尺寸:
@media screen and (max-width: 2059px) {
ol.dribbbles {
max-width: 1750px
}
}
@media screen and (max-width: 1809px) {
ol.dribbbles {
max-width: 1500px
}
}
@media screen and (max-width: 1559px) {
ol.dribbbles {
max-width: 1250px
}
}
@media screen and (max-width: 1309px) {
ol.dribbbles {
max-width: 1000px
}
}
@media screen and (max-width: 1059px) {
ol.dribbbles {
max-width: 750px
}
}
@media screen and (max-width: 809px) {
ol.dribbbles {
max-width: 500px
}
}
@media only screen and (max-width: 870px) {
}
@media screen and (max-width: 520px){
}
/各种手机的@media媒介/
参考:http://www.bluesdream.com/blog/jquery-css-fixed-toolbar-compatible-ie6.html
@media screen and (max-height:475px){
}
/此参数为iphone4的高度限制/
@media screen and (max-height:480px) and (max-width:320px){
}
/此参数为iphone4-iphone5的高度限制/
@media screen and (min-height: 481px) and (max-height: 568px){
}
/此参数为iphone5-iphone6的高度限制/
@media screen and (min-height:480px) and (max-height: 667px){
}
/联想的尺寸/
@media screen and (min-height:668px) and (max-height: 735px){
}
/此参数为iphone6 plus的高度/
@media screen and (min-height: 736px) {
}
/此参数为红米Note判断/
@media screen and (min-height:737px){
}
或者适配iphone和ipad等设备
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
原文链接:https://blog.csdn.net/qq_26445509/article/details/51567590