关于前端响应式的问题？ 50
@media响应式媒介尺寸，这个是我以前看到收藏的 你得知道自己特定设备的尺寸来对应相应的@media媒体查询；望采纳！！！！
一、定义断点
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）设置相应的min-width和max-width值
所以响应式设计一般对600px下，1000px上针对各版本做@media细化。
主要的有：
1.第一个断点群体就是针对于智能手机设置，他的宽度是小于480px(
2.第二个断点是高智能移动设备，比如说Ipads设备，他的宽度是小于768px（
3.第三个断点就是针对于大设备，比如说PC端，他的宽度是大于768px(>768px)
为了完美一些，我们还可以添加另外几种断点：
1.添加一个小于320px的断点，针对于小型的移动设备；(
2.还可以添加适用于平板设备的断点，大于768px小于1024px(>768px 和
3.最后还可以为超宽的桌面设置一个断点，大于1024px(>1024px)
综合下来，设置断点把握三个要点：
1.满足主要的断点；
2.有可能的话添加一些别的断点；
3.设置高于1024px的桌面断点
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}}
