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查询。

  • 相关阅读:
    python模块总结(一)命令行解析模块argparse
    TCP(一)三次握手和四次挥手
    容器网络(四)vxlan
    容器网络(三)容器间通信
    kvm虚拟化(二)网络虚拟化
    KVM虚拟化(一)创建虚拟机
    数字操作 —— 9_ 回文数
    数字操作 —— 8_字符串转换整数(atoi)
    数字操作 —— 7_整数反转
    字符串操作 —— 763_划分字母区间
  • 原文地址:https://www.cnblogs.com/nerrol/p/8126326.html
Copyright © 2011-2022 走看看