lycorisradiata

常用媒体查询大全
/* 匹配所有320X480的手机 */ @media only screen and (min...
扫描右侧二维码阅读全文
30
2018/08

常用媒体查询大全

   /* 匹配所有320X480的手机 */  
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {  
       
    }  
       
    /* 适配基于竖屏宽度最小为321px的手机 ----------- */  
    @media only screen and (min-width : 321px) {  
       
    }  
       
    /* 适配基于竖屏宽度最最大为479的手机 ----------- */  
    @media only screen and (max-width : 479px) {  
       
    }  
       
    /***** 适配安卓手机屏幕hack *****/  
       
    /* Android 240 X 320 ----------- */  
    @media only screen and (max-width: 241px){  
       
    }  
       
    /* Samsung Galaxy in portrait 380 X 685 竖屏----------- */  
    @media only screen and (min-width: 375px) and (max-width: 385px){  
    /* YOUR STYLE GOES HERE */  
    }  
       
    /* camsung Galaxy in Landscape 685 X  380  横屏----------- */  
    @media only screen and (min-width: 680px) and (max-width: 690px){  
    /* YOUR STYLE GOES HERE */  
    }  
    /* Kindle Portrait 600 X 1024 , Kindle阅读器竖屏适配----------- */  
    @media only screen and (min-width: 595px) and (max-width: 610px){  
       
    }  
       
    /* Kindle Landscape 1024 X 600 ,Kindle阅读器横屏适配 ----------- */  
    @media only screen and (min-width: 1000px) and (max-width: 1030px){  
       
    }  
       
    /***** 适配IPAD屏幕hack *****/  
       
    /* 适配ipad 横竖屏 ----------- */  
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
        
    }  
       
    /* 适配ipad 横屏 ----------- */  
    @media only screen  and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  
           
    }  
       
    /* 适配ipad 竖屏  */  
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){  
       
    }  
       
    /***** 适配 ipad Retina 视网膜 (ipad3 和 ipad4) *****/  
       
    /*  适配 ipad Retina 视网膜 横竖屏 ---------- */  
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2){  
       
    }  
       
    /* 适配 ipad Retina 视网膜 横屏 ----------- */  
       
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2){  
    /* YOUR STYLE GOES HERE */  
    }  
       
    /* 适配 ipad Retina 视网膜 竖屏----------- */  
       
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)and (-webkit-min-device-pixel-ratio: 2){  
    /* YOUR STYLE GOES HERE */  
    }  
    /***** IPAD 1 & 2 (ALSO IPAD MINI)*****/  
       
    /* iPad 1 & 2 in portrait and landscape ----------- */  
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){  
    /* YOUR STYLE GOES HERE */  
    }  
       
    /* iPad 1 & 2 in landscape ----------- */  
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 1)  {  
    /* YOUR STYLE GOES HERE */  
    }  
       
    /* iPad 1 & 2 in portrait ----------- */  
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1){  
    /* YOUR STYLE GOES HERE */  
    }  
       
    /* 适配PC和笔记本 ----------- */  
    @media only screen and (min-width : 1224px) {  
       
    }  
       
    /* 适配大屏幕 ----------- */  
    @media only screen and (min-width : 1824px) {  
        
    }  
    /* 适配 iPhone 4 ----------- */  
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {  
        
    } 
Last modification:November 30th, 2018 at 04:07 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment