Question

进一步向下是整个CSS文件。此css文件可以检测浏览器的宽度是

max 480px
介于481和1024之间
大于1024

例如，我在这里检测到浏览器的最大值为480px

@media handheld and (max-width: 480px),
   screen and (max-device-width: 480px),
   screen and (max-width: 480px)
{
    body
    {
       background : #68838B url(img/bg.jpg) no-repeat;
    }
}

本文档中的许多css样式在brwser的宽度时也有效最大值为480，介于481和1024之间或大于1024。

所以我的问题是最好的方法是什么？我在这个css文件中的方式如你所见，没有任何类型的媒体查询，所有常见的东西。例如，如果我希望我的背景在浏览器宽度为最大480px时为红色，我使用此媒体规则

@media handheld and (max-width: 480px),
   screen and (max-device-width: 480px),
   screen and (max-width: 480px)
{
    body
    {
       background : red url(img/bg.jpg) no-repeat;
    }
}

整个CSS文件身体 { 宽度：80％; font-family：arial，helvetica，sans-serif; 字体大小：小; 余量：0; 填充：0; 保证金：0.2em auto; }

@media handheld and (max-width: 480px),
   screen and (max-device-width: 480px),
   screen and (max-width: 480px)
{
    body
    {
       background : #68838B url(img/bg.jpg) no-repeat;
    }
}

@media only screen and (min-width: 481px) and
   (max-width: 1024px)
{
    body
    {
        background : #B0E0E6 url(img/bg.jpg) no-repeat;
    }
}

@media only screen and (min-width: 1025px)
{
    body
    { 
       background : #87a5be url(img/bg.jpg) no-repeat;
    }
}

.roundcorder
{
   border-radius: 3px 3px 0px 0px;
}

#home nav li.home a:link, 
#home nav li.home a:visited,
#aircraft nav li.aircraft a:link, 
#aircraft nav li.aircraft a:visited,
#bookning nav li.bookning a:link, 
#bookning nav li.bookning a:visited,
#contact nav li.contact a:link, 
#contact nav li.contact a:visited,
#employee nav li.employee a:link, 
#employee nav li.employee a:visited
{
    background-color: #fff;
}  

p#browser
{
   margin:0;
   padding:0; 
}   


header img
{
   float:left;
}

header #headerInfo
{
   font-size:100%;
   float:right; 
   padding-top:0.4em;
   padding-right:0.8em;
   font-style:italic;
}

header div:after, 
nav:after
{
   content :".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}

nav
{
   margin-top:1em;
   font-weight:bold;
   color:#fff; 
}

nav ul
{
   list-style:none;
   margin:0;
   padding:0;
}

nav li
{
   float: left;
   min-width : 5em;
   text-align : center;   
   margin-right:0.5em; 
}

nav li a:link, 
nav li a:visited
{
   background-color: rgba(255,255,255,0.6);
   color: rgb(0,0,0);
   text-decoration: none;
   display: block;
   padding: 0.75em;
   border-radius: 3px 3px 0px 0px;
}   

nav li a:hover 
{
   background-color:gray;  
}

section 
{
   font-size:115%;
   background-color: #fff;
   color: #000;
   padding: 0.5em;
}

section h1
{
   text-align:center;
   font-size:200%;
}

footer
{
   padding: 0.1em;
   background:#e3e3e3;
   font-size:90%;
   text-align:center;
   border-top:1px solid #000;
}

footer address
{
   margin-bottom:0.5em;
}

@media print
{
   body
   { 
      width:750pt;
      background-color:#fff;
      font-family: "times new roman", times, serif;
      font-size:14pt;
   }
}

处理媒体类型和CSS的最佳做法是什么？

0 个答案: