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

    判断设备横竖屏

    /* 横屏 */
    @media all and (orientation :landscape) {

    }

    /* 竖屏 */
    @media all and (orientation :portrait) {

    }

    判断设备宽高

    /* 设备宽度大于 320px 小于 640px */
    @media all and (min-320px) and (max-640px) {

    }

    判断设备像素比

    /* 设备像素比为 1 */
    @media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) {

    }

    /* 设备像素比为 1.5 */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {

    }

    /* 设备像素比为 2 */
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

    }

    常用设备设置

    iPhones

    /* ----------- iPhone 4 and 4S ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 320px)
    and (max-device- 480px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 320px)
    and (max-device- 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
    }

    /* Landscape */
    @media only screen
    and (min-device- 320px)
    and (max-device- 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ----------- iPhone 5 and 5S ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 320px)
    and (max-device- 568px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 320px)
    and (max-device- 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
    }

    /* Landscape */
    @media only screen
    and (min-device- 320px)
    and (max-device- 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ----------- iPhone 6 ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 375px)
    and (max-device- 667px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 375px)
    and (max-device- 667px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media only screen
    and (min-device- 375px)
    and (max-device- 667px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ----------- iPhone 6+ ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 414px)
    and (max-device- 736px)
    and (-webkit-min-device-pixel-ratio: 3) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 414px)
    and (max-device- 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media only screen
    and (min-device- 414px)
    and (max-device- 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    Galaxy Phones

    /* ----------- Galaxy S3 ----------- */

    /* Portrait and Landscape */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* ----------- Galaxy S4 ----------- */

    /* Portrait and Landscape */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {

    }

    /* Portrait */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    /* ----------- Galaxy S5 ----------- */

    /* Portrait and Landscape */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {

    }

    /* Portrait */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    HTC Phones

    /* ----------- HTC One ----------- */

    /* Portrait and Landscape */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {

    }

    /* Portrait */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Landscape */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    iPads

    /* ----------- iPad mini ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* Landscape */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* ----------- iPad 1 and 2 ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* Landscape */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* ----------- iPad 3 and 4 ----------- */

    /* Portrait and Landscape */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Portrait */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Landscape */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {

    }
  • 相关阅读:
    收藏网站制作常用经典css.div.布局.设计实例打包下载2
    下拉菜单 效果
    鼠标放在一个连接上,会显示图片(类似tooltip)
    收藏网站制作常用经典ajax.prototype.javascript实例打包下载2
    开发速查手册
    Visual Studio 2005 的 101 个示例(转)
    多行文本框限制输入字符长度(跳出窗体提示)
    发一个不用图片实现圆角代码,非常经典
    收藏网站制作常用经典css.div.布局.设计实例打包下载1
    Linux下php动态添加扩展
  • 原文地址:https://www.cnblogs.com/ommph/p/15292817.html
Copyright © 2011-2022 走看看