网站首页学无止境CSS

响应式布局设置--@media only screen and

发布时间:2014-09-29 18:05:02编辑:songlin阅读(639)

    @media only screen and

    only(限定某种设备)

    screen 是媒体类型里的一种

    and 被称为关键字,其他关键字还包括 not(排除某种设备)

    /* 常用类型 */

    类型 解释

    all 所有设备

    braille 盲文

    embossed 盲文打印

    handheld 手持设备

    print 文档打印或打印预览模式

    projection 项目演示,比如幻灯

    screen 彩色电脑屏幕

    speech 演讲

    tty 固定字母间距的网格的媒体,比如电传打字机

    tv 电视

    screen一般用的比较多,下面是我自己的尝试,列出常用的设备的尺寸,然后给页面分了几个尺寸的版本。

    /* 常用设备 */

    设备 屏幕尺寸

    显示器

    1. 1280 x 800 
    2.  
    3. ipad 1024 x 768 
    4.  
    5. Android 800 x 480 
    6.  
    7. iPhone 640 x 960 

    两种方式

    a

     

     

     

     

     

     

     

     

     

    意思是当屏幕的宽度大于600小于800时,应用styleB.css

    b

    1. @media screen and (max-width600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ 
    2.  
    3. .class { 
    4.  
    5. background#ccc
    6.  
    7.  

    device-aspect-ratio

    device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:

    1. @media only screen and (device-aspect-ratio:4/3

    -webkit-min-device-pixel-ratio的常见值对比(是设备上物理像素和设备独立像素,设备像素比率)

    设备分辨率设备像素比率

    1. Android LDPI: 320×240  0.75 
    2.  
    3. Iphone 3 & Android MDPI: 320×480  1 
    4.  
    5. Android HDPI: 480×800  1.5 
    6.  
    7. Iphone 4: 960×640  2.0 
    8.  
    9. -webkit-min-device-pixel-ratio: 1.0 

    所有非 Retina 的 Mac

    所有非 Retina 的 iOS 设备

    Acer Iconia A500

    Samsung Galaxy Tab 10.1

    Samsung Galaxy S

    其他设备

    1. -webkit-min-device-pixel-ratio为1.3 
    2.  
    3. Google Nexus 7 
    4.  
    5. -webkit-min-device-pixel-ratio为1.5 
    6.  
    7.  
    8.  
    9.  Google Nexus S Samsung Galaxy S II HTC DesireHTC Desire HDHTC Incredible S HTC VelocityHTC Sensation 
    10.  
    11. -webkit-min-device-pixel-ratio为2.0 
    12.  
    13. iPhone 4 iPhone 4S iPhone 5 iPad (3rd generation) iPad 4所有Retina displays 的MACGoogle Galaxy NexusGoogle Nexus 4Google Nexus 10Samsung Galaxy S IIISamsung Galaxy Note IISony Xperia SHTC One X 
    14.  
    15. -webkit-min-device-pixel-ratio: 3.0 
    16.  
    17. 1.HTC Butterfly 
    18.  
    19. 2.Sony Xperia S 
    20.  
    21. (min-resolution:144dpi) 

    (分辨率)

    使用于:位图媒体类型,接受max/min前缀:

    “resolution”媒体特性描述输出设备的分辨率,例如,像素密度。若查询设备的非方形像素,在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较,在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”(没有“min-”或“max-”前缀)查询从不查询设备的非方形像素。

    对于印刷机,相当于分辨率(任意颜色的绘制点的分辨率)。

    举例说明:该媒体查询表示样式表适用于分辨率大于每英寸144点的设备:

    1. @media print and (min-resolution: 144dpi) { … } 

    更新CSS3 Media Queries模板查询

    1.   /* 1、Smartphones (portrait and landscape) 只能手机横竖屏 */ 
    2.  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    3.  /* Styles */ 
    4.  } 
    1. /* 2、Smartphones (landscape) 智能手机横屏 */ 
    2. @media only screen and (min-width : 321px) { 
    3.     /* Styles */ 
    1. /* 3、Smartphones (portrait) 智能手机竖屏 */ 
    2. @media only screen and (max-width : 320px) { 
    3.     /* Styles */ 
    1. /* 4、iPads (portrait and landscape) IPAD 横竖屏 */ 
    2. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    3.     /* Styles */ 
    1. /* 5、iPads (landscape) IPAD横屏 */ 
    2. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    3.     /* Styles */ 
    1. /* 6、iPads (portrait) IPAD 竖屏 */ 
    2. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    3.     /* Styles */ 
    1. /* 7、iPhone 4 */ 
    2. @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { 
    3.     /* Styles */ 
    1. /* 8、640px显屏 */ 
    2. @media screen and (max-width : 640px) { 
    3.     /* CSS Styles */ 
    1. /* 9、800px显屏 */ 
    2. @media screen and (max-width : 800px) { 
    3.     /* CSS Styles */ 
    1. /* 10、1024显屏 */ 
    2. @media screen and (max-width : 1024px) { 
    3.     /* CSS Styles */ 
    1. /* 11、Desktops and laptops */ 
    2. @media only screen and (min-width : 1224px) { 
    3.     /* Styles */ 
    1. /* 12、Large screens */ 
    2. @media only screen and (min-width : 1824px) { 
    3.     /* Styles */ 
    1. /* iphone 6 横屏 */ 
    2. @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2){ 
    3.  /* Styles */
    4. /* iphone 6 竖屏 */ 
    5. @media only screen  
    6. and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2){ 
    7.     /* Styles */
    8. /* iphone 6 plus 横屏 */ 
    9. @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) { 
    10.     /* Styles */
    11. /* iphone 6 plus 竖屏 */ 
    12. @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) { 
    13.   /* Styles */