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

このドキュメントの CSS スタイルの多くは、ブラウザの幅が最大 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 ファイル本体全体 { width:80%; font-family: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