web013 RWD(Responsive Web Design)の考慮ポイント

RWDの考慮ポイント
グリッド、リキッド、複合など、状況により判断する。

■考慮ポイント
・viewportの設定(html:head)
・Fruid Imageの設定(css:reset)
・Media Queriesの設定(css)　※１
　ーfloatの解除
　ーfont-sizeの調整
　ーbackground-imageのサイズ調整
　ーナビゲーションの隠しボタン（ハンバーガーアイコンなど）

■コード
※各種セレクターや値はサンプル

HTML
※記述短縮のため該当箇所のみ記述

<meta name="viewport" content="width=device-width">

<nav><!-- breakpointでボタンを５個から６つへ変更 -->
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">RECRUIT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>

CSS

/* Fruid Image */
img {
  max-width: 100%;
  height:auto;
}
/* navボタンの非表示 */
nav li:first-child a{
  display: none;
}

/* Media Queries */
@media screen and (max-width:999px){

/* navボタンの表示 */
nav li:first-child a{ display: block;}

/*  floatの解除 */
.wrap{ overflow:visible; }
.content{ float:none; }

/*  font-sizeの調整  */
nav a{ font-size: 12px; }

/*  background画像のサイズ調整  */
header{ background-size: 60px; }

}

※１ビューポートの参考値
Bootstrap3.3.7 2017/5/14 latestVersion
bootstrap-3.3.7-dist>bootstrap.css>
　@media (min-width: 768px) and (max-width: 991px){}：タブレット
　@media (min-width: 992px) and (max-width: 1199px){}：PC
　@media (min-width: 1200px) {}：大画面

タブレット以上は左右余白20px;
ダブレット以下は左右余白10px;

Bootstrap4
　1200px以上がPC(大画面)用
　1199px～992pxがPC用
　991px～768pxがタブレット用
　767px～544pxがスマホ用
　543px以下がスマホ（小さいサイズ）用

■テストsite
Mobile Website Speed Testing Tool - Google
Mobile-Friendly Test Tool - Search Console Help

■RDWギャラリーサイト
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト