適配各類移動設備的media

/* Desktops and laptops ----------- */  
    @media only screen  
    and (min-width : 1224px) {  
    /* Styles */  
    }  
       
    /* Large screens ----------- */  
    @media only screen  
    and (min-width : 1824px) {  
    /* Styles */  
    }  
      
    /* old Smartphones (portrait and landscape) ----------- */  
    @media only screen  
    and (min-device-width : 320px)  
    and (max-device-width : 480px) {  
    /* Styles */  
    }  
       
    /* old Smartphones (landscape) ----------- */  
    @media only screen  
    and (min-width : 321px) {  
    /* Styles */  
    }  
       
    /* old Smartphones (portrait) ----------- */  
    @media only screen  
    and (max-width : 320px) {  
    /* Styles */  
    }  
      
    /* iPhone 4 ----------- */  
    @media  
    only screen and (-webkit-min-device-pixel-ratio : 1.5),  
    only screen and (min-device-pixel-ratio : 1.5) {  
    /* Styles */  
    }  
       
    /* iPads (portrait and landscape) ----------- */  
    @media only screen  
    and (min-device-width : 768px)  
    and (max-device-width : 1024px) {  
    /* Styles */  
    }  
       
    /* iPads (landscape) ----------- */  
    @media only screen  
    and (min-device-width : 768px)  
    and (max-device-width : 1024px)  
    and (orientation : landscape) {  
    /* Styles */  
    }  
       
    /* iPads (portrait) ----------- */  
    @media only screen  
    and (min-device-width : 768px)  
    and (max-device-width : 1024px)  
    and (orientation : portrait) {  
    /* Styles */  
    }  
      
    /* Android Tablet (portrait and landscape) ----------- */  
    @media only screen  
    and (min-device-width : 800px)  
    and (max-device-width : 1280px) {  
    /* Styles */  
    }  
       
    /* Android Tablet (landscape) ----------- */  
    @media only screen  
    and (min-device-width : 800px)  
    and (max-device-width : 1280px)  
    and (orientation : landscape) {  
    /* Styles */  
    }  
       
    /* Android Tablet (portrait) ----------- */  
    @media only screen  
    and (min-device-width : 800px)  
    and (max-device-width : 1280px)  
    and (orientation : portrait) {  
    /* Styles */  
    }  
       
    /* Desire + Galaxy S2 (portrait and landscape) ----------- */  
    @media only screen  
    and (min-device-width : 480px)  
    and (max-device-width : 800px) {  
    /* Styles */  
    }  
       
    /* Desire + Galaxy S2 (landscape) ----------- */  
    @media only screen  
    and (min-device-width : 480px)  
    and (max-device-width : 800px)  
    and (orientation : landscape) {  
    /* Styles */  
    }  
       
    /* Desire + Galaxy S2 (portrait) ----------- */  
    @media only screen  
    and (min-device-width : 480px)  
    and (max-device-width : 800px)  
    and (orientation : portrait) {  
    /* Styles */  
    }

還蒐集到一個:css

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
@media only screen and (max-device-width :480px){ }
@media only screen and (min-device-width :481px){ }

/*6*/
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }

/*6+*/
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }

/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }

/*4 4s*/
@media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }
相關文章
相關標籤/搜索