zoukankan      html  css  js  c++  java
  • CSS Media Query

    CSS Media Query

      CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.

      The basic syntax looks like this:

      

    // normal style
    #header-image {
        background-repeat: no-repeat;
        background-image:url('image.gif');
    }
    
    // show a larger image when you're on a big screen
    @media screen and (min- 1200px) {
        #header-image {
            background-image:url('large-image.gif');
        }
    }
    
    // remove header image when printing.
    @media print {
        #header-image {
            display: none;
        }
    }

      But can also be called like this:

      

    <link rel='stylesheet' media='all' href='normal.css' />
    <link rel='stylesheet' media='print' href='print.css' />
    <link rel='stylesheet' media='screen and (min- 701px)' href='medium.css' />

      The advantage of this method is that only the valid CSS is downloaded; so no print.css is only downloaded when printing (or using print preview).

      This example shows the 2 blocks on big screens next to each other, while on small screens they will be displayed below each other.

      

    #block1, #block2 {
        float: left;
        width: 100%;
    }
    
    @media (min- 1000px) {
        #block1, #block2 {
            width: 50%;
        }
    }

    参考:http://cssmediaqueries.com/what-are-css-media-queries.html

  • 相关阅读:
    python基础(十七)
    Python基础(十六)
    Python基础(十五)
    Python基础(十四)
    Python基础(十三)
    Python基础(十二)
    项目分享:模拟博客园登录
    项目分享:模拟购物车
    Python基础(十一)
    课件站
  • 原文地址:https://www.cnblogs.com/tekkaman/p/6763286.html
Copyright © 2011-2022 走看看