zoukankan      html  css  js  c++  java
  • 201509181046_《css3——media query整理》

    @charset "utf-8";
    
    /**
     * iPhone 4/4s landscape & portrait
     */
    @media only screen
    and (min-device- 320px)
    and (max-device- 480px)
    and (-webkit-device-pixel-ratio: 2)
    and (device-aspect-ratio: 2/3) {
    
    }
    
    /**
     * iPhone 4/4s portrait
     */
    @media only screen
    and (min-device- 320px)
    and (max-device- 480px)
    and (-webkit-device-pixel-ratio: 2)
    and (device-aspect-ratio: 2/3)
    and (orientation:portrait)  {
    
    }
    
    /**
     * iPhone 4/4s landscape
     */
    @media only screen
    and (min-device- 320px)
    and (max-device- 480px)
    and (-webkit-device-pixel-ratio: 2)
    and (device-aspect-ratio: 2/3)
    and (orientation:landscape) {
    
    
    }
    
    /**
     *  iPhone 5/5s landscape & portrait
     */
    @media only screen
    and (min-device- 320px)
    and (max-device- 568px)
    and (-webkit-min-device-pixel-ratio: 2) {
    
    
    }
    
    /**
     *  iPhone 5/5s portrait
     */
    @media only screen
    and (min-device- 320px)
    and (max-device- 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait) {
    
    }
    
    /**
     *  iPhone 5/5s landscape
     */
    @media only screen
    and (min-device- 320px)
    and (max-device- 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: landscape) {
    
    
    }
    
    /**
     *  iPhone 5/5s landscape & portrait
     */
    @media only screen
    and (min-device- 414px)
    and (max-device- 736px)
    and (-webkit-min-device-pixel-ratio: 3) {
    
    }
    
    /**
     *  iPhone 5/5s portrait
     */
    @media only screen
    and (min-device- 414px)
    and (max-device- 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
    
    }
    
    /**
     *  iPhone 5/5s landscape
     */
    @media only screen
    and (min-device- 414px)
    and (max-device- 736px)
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: landscape) {
    
    }
    
    @media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : portrait) { 
        //iPhone 6 Portrait
    }
    
    
    @media only screen and (min-device- 375px) and (max-device- 667px) and (orientation : landscape) { 
        //iPhone 6 landscape
    }
    
    
    @media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : portrait) { 
        //iPhone 6+ Portrait
    }
    
    
    @media only screen and (min-device- 414px) and (max-device- 736px) and (orientation : landscape) { 
        //iPhone 6+ landscape
    }
    
    @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px){ 
        //iPhone 6 and iPhone 6+ portrait and landscape
    }
    
    @media only screen and (max-device- 640px), only screen and (max-device- 667px), only screen and (max- 480px) and (orientation : portrait){ 
        //iPhone 6 and iPhone 6+ portrait
    }
    
    @media only screen and (max-device- 640px), 
    only screen and (max-device- 667px), 
    only screen and (max- 480px) 
    and (orientation : landscape){ 
        //iPhone 6 and iPhone 6+ landscape
    }
    /**
     *  Galaxy S3 landscape & portrait
     */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) {
    
    }
    
    /**
     *  Galaxy S3 portrait
     */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: portrait) {
    
    }
    
    /**
     *  Galaxy S3 landscape
     */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: landscape) {
    
    }
    
    /**
     *  Galaxy S4 landscape & portrait
     */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {
    
    }
    
    /**
     *  Galaxy S4 portrait
     */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {
    
    }
    
    /**
     *  Galaxy S4 landscape
     */
    @media screen
    and (device- 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {
    
    }
    
    /**
     *  Galaxy S5 landscape & portrait
     */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {
    
    }
    
    /**
     *  Galaxy S4 portrait
     */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {
    
    }
    
    /**
     *  Galaxy S4 landscape
     */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {
    
    }
    
    /**
     *  HTC One landscape & portrait
     */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {
    
    }
    
    /**
     *  HTC One portrait
     */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {
    
    }
    
    /**
     *  HTC One landscape
     */
    @media screen
    and (device- 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {
    
    }
    
    
    /**
     *  iPad Mini landscape & portrait
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {
    
    }
    
    /**
     *  iPad Mini portrait
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {
    
    }
    
    /**
     *  iPad Mini landscape
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {
    
    }
    
    /**
     *  iPad 1/2 landscape & portrait
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {
    
    }
    
    /**
     *  iPad 1/2 portrait
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {
    
    }
    
    /**
     *  iPad 1/2 landscape
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {
    
    }
    
    /**
     *  iPad 3/4 landscape & portrait
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (-webkit-min-device-pixel-ratio: 2) {
    
    }
    
    /**
     *  iPad 3/4 portrait
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 2) {
    
    }
    
    /**
     *  iPad 3/4 landscape
     */
    @media only screen
    and (min-device- 768px)
    and (max-device- 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
    
    }
    
    /**
     *  Galaxy Tab 10.1 landscape & portrait
     */
    @media
    (min-device- 800px)
    and (max-device- 1280px) {
    
    }
    
    /**
     *  Galaxy Tab 10.1 portrait
     */
    @media
    (max-device- 800px)
    and (orientation: portrait) {
    
    }
    
    /**
     *  Galaxy Tab 10.1 landscape
     */
    @media
    (max-device- 1280px)
    and (orientation: landscape) {
    
    }
    
    /**
     *  Asus Nexus 7 landscape & portrait
     */
    @media screen
    and (device- 601px)
    and (device-height: 906px)
    and (-webkit-min-device-pixel-ratio: 1.331)
    and (-webkit-max-device-pixel-ratio: 1.332) {
    
    }
    
    /**
     *  Asus Nexus 7 portrait
     */
    @media screen
    and (device- 601px)
    and (device-height: 906px)
    and (-webkit-min-device-pixel-ratio: 1.331)
    and (-webkit-max-device-pixel-ratio: 1.332)
    and (orientation: portrait) {
    
    }
    
    /**
     *  Asus Nexus 7 landscape
     */
    @media screen
    and (device- 601px)
    and (device-height: 906px)
    and (-webkit-min-device-pixel-ratio: 1.331)
    and (-webkit-max-device-pixel-ratio: 1.332)
    and (orientation: landscape) {
    
    }
    
    /**
     *  Kindle Fire HD 7" landscape & portrait
     */
    @media only screen
    and (min-device- 800px)
    and (max-device- 1280px)
    and (-webkit-min-device-pixel-ratio: 1.5) {
    
    }
    
    /**
     *  Kindle Fire HD 7" portrait
     */
    @media only screen
    and (min-device- 800px)
    and (max-device- 1280px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: portrait) {
    }
    
    /**
     *  Kindle Fire HD 7" landscape
     */
    @media only screen
    and (min-device- 800px)
    and (max-device- 1280px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: landscape) {
    
    }
    
    /**
     *  Kindle Fire HD 8.9" landscape & portrait
     */
    @media only screen
    and (min-device- 1200px)
    and (max-device- 1600px)
    and (-webkit-min-device-pixel-ratio: 1.5) {
    
    }
    
    /**
     *  Kindle Fire HD 8.9" portrait
     */
    @media only screen
    and (min-device- 1200px)
    and (max-device- 1600px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: portrait) {
    }
    
    /**
     *  Kindle Fire HD 8.9" landscape
     */
    @media only screen
    and (min-device- 1200px)
    and (max-device- 1600px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: landscape) {
    
    }
    
    /**
     *  Non-Retina Screens
     */
    @media screen
    and (min-device- 1200px)
    and (max-device- 1600px)
    and (-webkit-min-device-pixel-ratio: 1) {
    }
    
    /**
     *  Retina Screens
     */
    @media screen
    and (min-device- 1200px)
    and (max-device- 1600px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) {
    }
    
    /**
     *  Apple Watch
     */
    @media
    (max-device- 42mm)
    and (min-device- 38mm) {
    
    }
    
    /**
     *  Moto 360 Watch
     */
    @media
    (max-device- 218px)
    and (max-device-height: 281px) {
    前端-语言
  • 相关阅读:
    cesium 学习(七) HeadingPitchRoll
    cesium 学习(六) 坐标转换
    cesium 学习(五) 加载场景模型
    Cesium 学习(一)环境搭建
    Cesium 学习(二)所支持的模型数据类型,以及转换
    cesium 学习(四) Hello World
    Cesium 学习(三)各种资源链接
    【Windows编程】系列第十一篇:多文档界面框架
    【Windows编程】系列第十篇:文本插入符
    【Windows编程】系列第八篇:通用对话框
  • 原文地址:https://www.cnblogs.com/beesky520/p/4818564.html
Copyright © 2011-2022 走看看