0

さて、今日は、レスポンシブ Web デザインのテクニックを学びましょう。これまでのところとても良いと思います;）

@media screen and (min-width: 768px) {
  #avacweb_chat{
    height: 70%;
    width: 600px;
    }
 }
@media screen and(min-width:600px) {
  #avacweb_chat{
    height: 70%;
    width: 540px;
    }
 }
@media screen and(min-width:480px) {
  #avacweb_chat{
    height: 500px;
    width: 320px;
    }
  #chatbox_members{
    display:none;
    }
 }
@media screen and(min-width:320px) {
  #avacweb_chat{
    height: 360px;
    width: 220px;
    }
 #chatbox_members{
   display:none;
    }
}

私の偉大な SO メンバーの何人かにいくつか質問したかったので、メディア クエリが画面に集中していることがわかります。

 @media #avacweb_chat and (min-width: 500px) {

   }

それとも、画面サイズだけに集中できますか? また、これらのメディア クエリでトランジションとトランスフォームを使用することはできますか? （IEがサポートしないことは知っています）。これらは私が持っている唯一の2つの質問です。

Screen 以外の要素のサイズに注目 クエリに CSS3 を追加。

4

1 に答える 1

1

また、これらのメディア クエリでトランジションとトランスフォームを使用することはできますか?

はい、確かに。通常どおりにそれらを含めるだけです

とにかくこれを行うことはありますか

@media #avacweb_chat and (min-width: 500px) {

 }

ここで何を得ているのかわかりません。ここでの目標が、500px を超えるビューポートの avacweb_chat div をカスタマイズすることである場合は、次を使用します。 

@media (min-width: 500px) {
#avacweb_chat{
/* some styles here */
}

}

レスポンシブ デザインに足を踏み入れたばかりの場合は、BootstrapやFoundationなどのオプション、または他の多くの優れた選択肢の 1 つを検討しましたか。必ずしもすべての人に適しているわけではありませんが、すぐに始めることができます。

RWDを楽しもう！

于 2013-05-31T00:35:33.170 に答える