zoukankan      html  css  js  c++  java
  • CSS3 Media Queries

    CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

    CSS3 Media Queries(demo)

    Check my demo and resize your browser window to see it in action.

    Max Width

    The following CSS will apply if the viewing area is smaller than 600px.

    @media screen and (max- 600px) {
      .class {
        background
    : #ccc;
      
    }
    }

    If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.

    <link rel="stylesheet" media="screen and (max- 600px)" href="small.css" />

    Min Width

    The following CSS will apply if the viewing area is greater than 900px.

    @media screen and (min- 900px) {
      .class {
        background
    : #666;
      
    }
    }

    Multiple Media Queries

    You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

    @media screen and (min- 600px) and (max- 900px) {
      .class {
        background
    : #333;
      
    }
    }

    Device Width

    The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

    @media screen and (max-device- 480px) {
      .class {
        background
    : #000;
      
    }
    }

    For iPhone 4

    The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

    <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

    For iPad

    You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

    Media Queries for Internet Explorer

    Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

  • 相关阅读:
    Mysql的select加锁分析
    浅析Kubernetes的工作原理
    HTTP/2部署使用
    Amazon新一代云端关系数据库Aurora
    为什么 kubernetes 天然适合微服务
    深入解读Service Mesh背后的技术细节
    微服务的接入层设计与动静资源隔离
    Prim算法和Kruskal算法介绍
    DAG及拓扑排序
    BFS和DFS
  • 原文地址:https://www.cnblogs.com/fxair/p/2695465.html
Copyright © 2011-2022 走看看