zoukankan      html  css  js  c++  java
  • media query学习笔记

    原文转自:http://blog.csdn.net/renfufei/article/details/19981133

         http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

          http://www.blueidea.com/tech/web/2010/7912_3.asp

                 http://www.moke8.com/article-5657-1.html

    一、基本定义

    1、CSS中的Media Query(媒介查询)是什么?

    通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。

    2、media query能够获取哪些值?

    设备的宽和高device-width,device-heigth显示屏幕/触觉设备。

    渲染窗口的宽和高width,heigth显示屏幕/触觉设备。

    设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。

    画面比例aspect-ratio点阵打印机等。

    设备比例device-aspect-ratio-点阵打印机等。

    对象颜色或颜色列表color,color-index显示屏幕。

    设备的分辨率resolution。

    3、语法结构及用法

    @media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

    二、使用示例

    1.写入一个css内,css内用media query区分

    /*兼容IE8,满足条件时后面覆盖前面*/
    .section{
            width:20%;
            height: 60px;
            background-color: yellow;
            float:left;
            border:1px solid white;
            color:white;
        }
    /*宽度在200到600之间*/
    @media screen and (min- 200px) and (max- 600px){
        .section{
            width:20%;
            height: 60px;
            background-color: red;
            float:left;
            border:1px solid white;
            color:white;
        }
    }
    
    /*宽度大于600px*/
    @media screen and (min- 600px) {
        .section{
            width:45%;
            height: 90px;
            color:white;
            background-color: blue;
            float: left;
            border:1px solid white;
        }
    }

    2.引入css时,指定media属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    
        <link rel="stylesheet" type="text/css" href="mediaQueryIE8.css">
        
        <link rel="stylesheet" media="screen and (min- 100px) and (max-600px)" type="text/css" href="mediaQuery2.css">
        <link rel="stylesheet" media="screen and (min- 600px) "type="text/css" href="mediaQuery3.css">
        <!--width为600px时,mediaQuery3.css生效,后面覆盖前面-->
    </head>
    <body>
        <div class="section">111111</div>
        <div class="section">222222</div>
        <div class="section">333333</div>
        <div class="section">444444</div>
        <div class="section">555555</div>
        <div class="section">666666</div>
        <div class="section">777777</div>
        <div class="section">888888</div>
        <div class="section">999999</div>
    </body>
    </html>
  • 相关阅读:
    htmlUnil-2.33 jar包
    HtmlUnil 不兼容问题
    Java 网页抓取 工具类
    浏览器不兼容
    Chrome常用调试技巧1
    关于社交网络的思考
    google浏览器历史旧版
    EJB是什么Java使用EJB容器的详细概述
    何必言精通——十年杂感(转载)
    搜索优化—如何在Google搜索引擎上排名靠前Google左侧排名
  • 原文地址:https://www.cnblogs.com/grape1211/p/4265389.html
Copyright © 2011-2022 走看看