zoukankan      html  css  js  c++  java
  • Media Queries详细

    @media only screen and (max-device- 480px) { //页面最大宽度480px
    }
    
    <link rel="stylesheet" type="text/css" media="only screen and (max-device- 480px)" href="small-device.css" /> //外链式
    

      

    @media only screen and (min-480px) and (max-width : 768px){ //480 < x < 768
    }
    

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

    /* for 4:3 screen */
    @media only screen and (device-aspect-ratio:4/3){
    }
      
    /* for 16:9 and 16:10 screen */
    @media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    }
    
    /* for 480px*800px width screen Nexus One和Desire等手机 */
    @media only screen and (device-aspect-ratio:5/3){
    }
    
    /* retina分辨率 */
    @media only screen and (-webkit-min-device-pixel-ratio: 2){
    }
  • 相关阅读:
    67家基金子公司背景脉络梳理
    港股奇葩术语知多少
    68家信托公司7大派系股东分食图谱
    港股术语
    流动性陷阱
    ORACLE归档模式和非归档模式的利与弊
    肥尾效应
    DVP
    金融衍生品如何定价
    绿鞋机制
  • 原文地址:https://www.cnblogs.com/archrjoe/p/3605456.html
Copyright © 2011-2022 走看看