zoukankan      html  css  js  c++  java
  • css语法规则屏幕自适应及条目应用优先权

    1.

    !important 提升指定样式条目的应用优先权。

    div {
    color: #f00 !important;
    color: #000;
    }
    在上述代码中,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则;其它浏览器下div的文本颜色为#f00

    2.可以让屏幕自适应的方法:

    /* 样式代码导入 样式文件 */

    第一种方式:

    <link media="screen and (800px)" rel="stylesheet" href="style/css800.css">
    <link media="screen and (1280px)" rel="stylesheet" href="style/css1280.css">
    <link media="screen and (1440px)" rel="stylesheet" href="style/css1440.css">

    第二种方式:

    <style>

    @import url(style/css800.css) screen and (min-800px);
    @import url(style/css1280.css) screen and (min-1280px);
    @import url(style/css1440.css) screen and (min-1440px);

    </style>

    如下为css800.css的代码

    1 #container{
    2     width:760px;
    3     height:300px;
    4     border:1px solid red;
    5     background-color:red;
    6 }

    如下为css1280.css的代码

    1 #container{
    2     width:1004px;
    3     height:300px;
    4     border:1px solid red;
    5     background-color:red;
    6 }

    如下为css1440.css的代码

    1 #container{
    2     width:1320px;
    3     height:300px;
    4     border:1px solid red;
    5     background-color:red;
    6 }

    第三种方式:

     1 *{
     2         margin:0;
     3         border:0;
     4         padding:0;    
     5     }
     6     #container{
     7         width:1240px;
     8         height:300px;
     9         background-color:red;
    10         margin:0 auto;
    11     }
    12     
    13     /* 当屏幕的分辨率宽度小于等于1260px时,执行如下样式代码 */
    14     @media (max-1260px) {
    15         #container{
    16             width:930px;
    17             background-color:green;
    18         }
    19     }
    20     
    21     /* 当屏幕的分辨率宽度小于等于800px时,执行如下样式代码 */
    22     @media (max-800px) {
    23         #container{
    24             width:760px;
    25             background-color:blue;
    26         }
    27     }
    28     
    29     </style>
  • 相关阅读:
    Windows性能调优: Perfomn.exe 和Perfmon /res
    WPF:逻辑树和视觉树
    AD FS 概述
    SQL Server : TRUSTWORTHY 数据库属性
    WCF:在开发期间应该注意的问题
    ASP.NET MVC 2中的数据验证
    SQL Server:如何在Service Broker发送消息验证失败后获取源消息
    GDI+:自定义控件时如何使用Region来输出特定区域
    LINQ to XML:如何替换XCData的内容
    javascript是否真的就不能实现跨站请求呢?
  • 原文地址:https://www.cnblogs.com/lsr111/p/4395066.html
Copyright © 2011-2022 走看看