Responsive Design, @media

4413 ワード
テキストリンク

Responsive Design


今はパソコンだけでなく、携帯電話でインターネットを利用しています.多くのサイトで使われています.しかし、パソコンと携帯電話の大きさは違います.そのため、どちらか一方に対してのみ設計を行うと、もう一方では使いづらい.ネットワークの特性上,PC,モバイル,複数のオペレーティングシステムなど様々な環境において適切な操作が必要である.
画面の大きさに応じて、ページの各要素が反応し、画面上で最適化された形で動作するデザインが反応型デザインです.

@media


@mediaは反応型設計を構成する核心技術である.スタイルラベル内に@media(条件文){execution}形式で記述します.スマートフォンの横モードや縦モードなど、さまざまなサイズの画面に対応できます.
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div {
        border:5px solid green;
        font-size:60px;
      }
      @media(min-width:800px) {    /* 화면 크기가 800px보다 큰 경우 */
        div {
          display:none;            /* div 태그의 display를 안 보이게 처리 */
        }
      }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body>
</html>
以上の例は、反応型設計の簡単な例である.
画面が800 pxを超える場合はdivラベルは表示されません.
for iterator ArrayList遍歴効率テスト
[BOJ]1931-会議室の手配