0

まず、私はフロントエンドエンジニアではなく、UIとUXのスキルは非常に低いと言いたいです。

pだから私の質問は：私は中にタグを持つdivを持っています。width: 700pxブラウザウィンドウが最大化されたときに欲しいです。しかし、このプロパティをdivのCSSに配置するとします。ウィンドウのサイズを変更しても、テキストは縮小されません。したがって、ウィンドウが最大化されている間に特定のポイントまでそれを保持し、ウィンドウのサイズを変更した場合は、サイドバーのdivに影響を与えずに縮小したいと思います。

より明確にするために、私はあなたに例をあげます：

Maximazedブラウザウィンドウ：

ここに画像の説明を入力してください

最小化されたブラウザウィンドウ：

ここに画像の説明を入力してください

HTML

 <!-- HOME -->
  <div id="home" class="content">
   <h2>Home</h2>
   <p>AAAAAAAAAAAAAAAAAAA</p>
   <p>BBBBBBBBBBBBBBBBBBBB</p>
  </div>

CSS

.content {
    padding-bottom: 30px;
    position: absolute;
    left: 280px;
    right: 40px;
    top: 0px;
}
.content h2 {
    font-size: 110px;
    color: #fff;
    color: rgba(255,255,255,0.9);
    padding: 10px 0 20px 0;
    margin-top: 50px; 
}
.content p {
    color: black;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
}
4

2 に答える 2

2

必要なのはMedia Queryです。それらに対する W3C の推奨事項をご覧ください。

基本的に、構文は次のとおりです。

@media screen and (min/max-width: ){ 
  //do something

}

これらは「ブレークポイント」と呼ばれます。つまり、ブラウザが指定した最小/最大幅に達した時点で、他の CSS を無効にすることができます。だからあなたはあなたpとdivサイズを変えることができます。

    @media screen and (min/max-width: ){ 

      div {
          width: 200px;
       }

       p {
          font-size: 20px;
       }
    }

それらの使用方法に関するSmashing Magazineのチュートリアルもご覧ください。

于 2013-01-06T00:12:17.210 に答える
2

あなたのケースではメディア クエリを使用する必要はありませんが、より複雑なケース (たとえば、異なるブレークポイント) ではそうなるでしょう。

使用するだけmax-width: 700pxで完了です。

通常の動作: 段落の幅が 700px を超えることはありません。
幅が非常に小さい場合、段落は他のブロック要素と同じように幅全体を占有し、それでも 700px よりも小さいため、MQ は必要ありません!

効果を確認するには、このフィドルを参照してください: http://jsfiddle.net/LQbgJ/ (私は 700 ではなく 200px を使用しました)
互換性は IE7+ である必要があります

于 2013-01-06T00:22:59.913 に答える