css3-responsive-layout

レスポンシブ・レイアウトとは

ブラウザの幅によってスタイルシートを切り分ける機能です。

レスポンシブ・レイアウト機能によって、画面幅の広いパソコン用の表示と画面幅の狭いスマートフォンのサイト表示を同一のHTMLで切り替えることができます。

外部スタイルシートを切り替える


<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="smartphone.css">

同スタイルシートで切り替える

端末の解像度で比較


@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

ブラウザの解像度で比較

PCでブラウザ幅をD&Dで変更するとレイアウトが変わる


@media (max-width: 480px) {
  .column {
    float: none;
  }
}

このページを開いたまま、ブラズザのサイズを小さくしてください。レイアウトが横並びから縦並びに変更されます。

BOX1
BOX1
BOX2
BOX2
BOX2
BOX3
BOX3
BOX1
BOX1
BOX2
BOX2
BOX2
BOX3
BOX3

Media Descriptors

screen - 一般的なコンピュータースクリーン

tty - ターミナルなどの固定ピッチ画面

tv - テレビ

projection - プロジェクター

handheld - 携帯デバイス

print - 印刷

braille - 点字ブラウザ

aural - 音声読み上げブラウザ

all - 全て

Media Features

width - レンダリング領域の幅

height - レンダリング領域の高さ

device-width - 画面幅

device-height - 画面高さ

orientation - "landscape" or "portrait"の2値

aspect-ratio - レンダリング領域の縦横比、"16/9"などと指定する

device-aspect-ratio - 画面の縦横比

resolution - 解像度

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
view source

JavaScript


  
CSS

  
.box_parent{
  margin:10px;
  height:120px;
}

.box_parent div:nth-child(1){
  background-color:#eeeeee;
}
.box_parent div:nth-child(2){
  background-color:#cccccc;
}
.box_parent div:nth-child(3){
  background-color:#999999;
}

#container_flexible{
  display:-webkit-box;
  display:-moz-box;
  display:box;
}
#container_flexible div:nth-child(1){
  background-color:#eeeeee;
  width:120px;
}
#container_flexible div:nth-child(2){
  background-color:#cccccc;
  width:auto;
  -webkit-box-flex:1;
  -moz-box-flex:1;
  box-flex:1;
}
#container_flexible div:nth-child(3){
  background-color:#999999;
  width:80px;
}



#container_old:after{
  content:"";
  display:block;
  clear:both;
}
#container_old div{
  float:left;
  height:100%;
}
#container_old div:nth-child(1){
  width:20%;
}
#container_old div:nth-child(2){
  width:50%;
}
#container_old div:nth-child(3){
  width:30%;
}


@media (max-width: 480px) {
  #container_flexible {
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    box-orient:vertical;
  }
  #container_flexible div:nth-child(1),
  #container_flexible div:nth-child(2),
  #container_flexible div:nth-child(3){
    width:auto;
  }
  #container_old div{
    width:auto;
    height:auto;
    float:none;
  }
  #container_old div:nth-child(1),
  #container_old div:nth-child(2),
  #container_old div:nth-child(3){
    width:auto;
  }
}

  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-css/css3-responsive-layout/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。