zoukankan      html  css  js  c++  java
  • CSS3 Media Queries在iPhone,iPad 等常用设备的设置方法

    http://www.52html5.com/?p=2413

    CSS3 中的 Media Queries 可以让我们设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表。现在最常见的一个例子,就是可以同时给 PC 的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,它可以让我们定制不同的分辨率和设备,并在不改变内容的情况下,制作的网页在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。

    CSS Media Queries

    常用设备的 CSS3 Media Queries

    所有 iPad Media Queries

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

    iPad 横屏

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

    iPad 竖屏

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

    高清屏 iPad Media Queries

    即 iPad 3 & 4 的 Media Queries:

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

    高清屏 iPad 横屏

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

    高清屏 iPad 竖屏

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

    iPad 1 & 2 Media Queries

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

    iPad 1 & 2 横屏

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

    iPad 1 & 2 竖屏

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

    iPad mini 也是和 iPad 1 和 2 一样。
    iPhone 5 Media Queries

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) { /* STYLES */}

    iPhone 5 横屏

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) 
    and (orientation : landscape) { /* STYLES */}

    iPhone 5 竖屏

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px) 
    and (orientation : portrait) {/* STYLES */ }

    iPhone 2G, 3G, 4, 4S Media Queries

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {/* STYLES */}

    iPhone 2G-4S 横屏

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) 
    and (orientation : landscape) { /* STYLES */}
  • 相关阅读:
    【JZOJ6271】【NOIP提高组A】锻造 (forging)
    【JZOJ6272】【NOIP提高组A】整除 (division)
    【JZOJ3397】【GDOI2014模拟】雨天的尾巴
    input绑定datapicker控件后input再绑定blur或者mouseout等问题
    解决每次打开office 2010显示正在配置的问题
    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法
    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
    本地同时启动两个tomcat
    转: ExtJS中xtype一览
    web前端基础知识及快速入门指南
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6518757.html
Copyright © 2011-2022 走看看