Bootstrap @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媒介*/
 
@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}}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM