1

再往下是整个 CSS 文件。这个css文件可以检测浏览器的宽度是什么时候

  1. 最大 480 像素
  2. 在 481 和 1024 之间
  3. 大于 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;
    }
}

当浏览器的宽度最大为 480、介于 481 和 1024 之间或大于 1024 时，我在本文档中的许多 css 样式也是有效的。

所以我的问题是最好的方法是什么？如您所见，我在此 css 文件中所做的方式是放置所有常见的内容，而无需任何类型的媒体查询。例如，如果我希望我的背景在浏览器宽度最大为 480 像素时为红色，我使用此媒体规则

@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 文件体 { width:80%; 字体系列：arial、helvetica、sans-serif；字体大小：小；边距：0；填充：0；边距：0.2em 自动；}

@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;
   }
}
4

0 回答 0