2

私はレスポンシブ Web サイトで作業しています。それを責任あるものにするためにメディアクエリを使用しました。基本的に、固定幅は使用していません。すべての div の幅としてパーセンテージを使用しました。

ブラウザのサイズ変更に応じてウェブサイトを比例的にスケーリングできるようにします。幅のパーセンテージを使用すると、古いものでは問題が発生する可能性があります。ie 9 より前の ie はメディア クエリをサポートしていないため、これらの ie 用の非スケーラブル バージョンをビルドしたいと考えています。スケーラビリティをもたらすためのコードを少ししか与えていないので、メインのスタイルシートの CSS コードをデフォルトの CSS の下/どこかに書いてもよろしいですか?

のようにstyle.css:

#info {
   width: 13.672%;
   /*if ie9 and lower
   width: 175px;*/
   height: 830px;
   /*if ie9 and lower
   margin-right: 40px;*/
   margin-right: 3.125%;
   float: left;
}

img {
  margin: 0px;
  padding: 0px;
  border: 0px;
  max-width: 100%;
  /*if ie9 and lower
   max-width: inherit*/
  height: auto;
  /*if ie9 and lower
   height: inherit*/
}

その形で書きたい。しかし、私は正しいフォーマットを知りません。正しいフォーマットを教えてください。

あなたへの別の質問。これらのバージョンの ie はメディアクエリをサポートしていないため、メタ タグ

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="kt_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="kt_tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:801px) and (max-width:1024px)" href="kt_medium.css" />

を使用するとtablet.css、mobile.cssそれらの古いバージョンで問題が発生することはありません。そうではありませんか? つまり、メインのスタイルシート ( ) だけに IE の特別な CSS を書きたいということですKT2012.css。mobile.cssat などのすべてのスタイルシートで、すべての IE の特別な CSS を記述する必要がありtablet.cssますか? その考案されたベースの css ファイルが古い ie でサポートされていない場合、つまり、スケーラブルでないバージョンの ie を作成する場合、そのデバイス/ビューポート ベースのスタイルシートでは何もしませんね。

4

2 に答える 2

5

私は HTML5 ボイラープレートのアプローチをお勧めします。基本的に、次のようにドキュメントを設定します。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

これで、IE の特定のバージョンのみを正確に対象とするクラスが用意されました。CSS は次のようになります。

.element { margin-bottom: 20px; }
.lt-ie9 .element { margin-bottom: 10px; }

これにより、CSS のハックを回避し、すべてを 1 つのスタイルシートに保持できます。

于 2013-04-15T16:10:30.577 に答える