-1

すべてのデバイスで完全に表示される (レスポンシブ) Web サイトを設計しようとしています。青写真の CSS フレームワーク (流体に変換) を使用しています。単純な見出しの次のコードがあります。

HTML

<div class="prepend-3" style="margin-top:20px;">
   <h1>Stack <span style="color:#C6CBCE">Overflow</span></h1>
</div>

私のCSS

h1 { 
   padding: 20px 0; margin: 0; 
   font-family: "Trebuchet MS", serif; 
   font-size: 9em; color: #222; 
   font-weight: normal; 
   line-height: 80px; }

私が直面している問題は、ブラウザのウィンドウを最大モードに維持してコードを実行すると、「スタック」と「オーバーフロー」の両方の単語が同じ行に表示されることです。これは完璧ですが、ブラウザのウィンドウを最大化しないと、行は次のように分割されます。

この問題を解決する方法 (レスポンシブにする方法) を教えてください。

ありがとう ：）

ここに画像の説明を入力

4

1 に答える 1

2

white-space: nowrap;プロパティを使ってみる

h1 { 
   padding: 20px 0; 
   margin: 0; 
   font-family: "Trebuchet MS", serif; 
   font-size: 9em; 
   color: #222; 
   font-weight: normal; 
   line-height: 80px;
   white-space: nowrap; <------Here
}

または正確には、CSS3 @media クエリなどを使用して、画面サイズに固有のさまざまなスタイルを指定することもできますが、指定したとおりにこれを使用していると思いますResponsive

@media only screen and (max-device-width: 480px) {
 /* Styles Goes Here */  
}
于 2012-10-31T18:59:00.943 に答える