zoukankan      html  css  js  c++  java
  • 媒体查询相关

    移动端媒体查询尺寸参考

    /*iphone4*/

    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){

    }

    /*iphone4s*/

    @media screen and (min- 320px) and (max- 480px) {

    }

    /*iphone5*/

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){

    /*iphone6*/

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

    }

    /*iphone6+*/

    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){

    }

    /* iPads (portrait)  */

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    }

    /* iPads (landscape)  */

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    }

    /* iPads (portrait and landscape) */

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    }

    /*魅族*/

    @media only screen and (max-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){

     }

    /*mate7*/

    @media only screen and (max-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){

     }

    /* 平板之类的宽度 1024 以下设备 */

    @media only screen and (min- 321px) and (max- 1024px) {

    }

    /* PC客户端或大屏幕设备: 1028px 至更大 */

    @media only screen and (min- 1029px) {

    }

    /* 竖屏 */

    @media screen and (orientation:portrait) and (max- 720px) {

    }

    /* 横屏 */

    @media screen and (orientation:landscape) and (min-width : 480px){

    }

    注:-webkit-min-device-pixel-ratio可在js代码中通过devicePixelRatio查询。

  • 相关阅读:
    P1270 【“访问”美术馆】
    SP14932 【LCA
    NOI 题库 9272 题解
    Code[VS] 1230 题解
    20161022 NOIP模拟赛 T1 解题报告
    20161023 NOIP 模拟赛 T2 解题报告
    20161023 NOIP 模拟赛 T1 解题报告
    20161022 NOIP模拟赛 解题报告
    POJ 1979 题解
    POJ 1160 题解
  • 原文地址:https://www.cnblogs.com/nerrol/p/8126326.html
Copyright © 2011-2022 走看看