ソースtenor
応答レイアウトは、ユーザーの動作、プラットフォーム、画面サイズ、およびデバイスの向きに応じてページのデザインを変更し、現代的なWeb開発の不可欠な部分です.それはあなたが大幅にお金を節約し、各解像度のための新しいデザインを描画することはできませんが、個々の要素のサイズと場所を変更することができます.
この記事は、ウェブサイトの基本的な要素とどのようにそれらを適応させるかについて説明します.

画面解像度調整

原則として、別々のカテゴリごとにデバイスを別々に分けることができ、それぞれのタイプごとに別々に分けることができます.さらに、統計によると、私たちには様々な解像度があります.

ソースjadeinkdesign
各デバイスごとに別々にコードを続けることができないことは明らかです.しかし、それから我々は何をすることができますか?

👉 すべてを柔軟にする

もちろん、これは理想的ではありませんが、ほとんどの問題を修正します.
ここでの全体設計はresponsive layers ,畝images ,そして、いくつかの場所では、スマートマークアップ.応答層を作成することは、一般的な実施であり、これは応答画像の場合ではない.ただし、必要な場合は、以下のテクニックを考えてください.

Hiding and Revealing Portions of Images ;

Creating Sliding Composite Images ;

Foreground Images That Scale With the Layout

詳細については、私たちはあなたがZoe Microley Gillenwaterの本をチェックアウトすることをお勧めします"Creating Flexible Images" .
あなたがイメージ全体を減らすならば、ラベルは読めなくなります.したがって、ロゴを保存するために、画像は2つの部分に分けられます:最初の部分(イラスト)は背景として使われます、2番目(ロゴ)は比例的にサイズ変更されます.

<h1 id="logo">
  <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/></a>
</h1>

要素h1 バックグラウンドとしてイメージを含んでいます、そして、イメージは容器(ヘッダー)の背景に合わせられます.

👉 2 -フレキシブルイメージ

画像との作業は、最大の課題の一つは、応答性の設計での作業です.例えば、イメージをリサイズする方法はたくさんあります.つ目の解決方法は、CSSにおいて

img {max-width: 100%;}

画像の最大幅は、画面またはブラウザウィンドウの幅の100 %であるので、幅が小さく、画像が小さくなります.注意してくださいmax-width IEでサポートされていないので、width: 100% .
提案された方法は敏感なイメージを作成するための良いオプションです、しかし、サイズだけを変えることによって、我々はイメージ重量を同じままにします.

👉 3つの反応画像

フィラメント群によって提示された手法は,画像のサイズを変更するだけでなく,ローディング時間を高速化するために小画面上の画像の解像度を圧縮する.

ソースtprogger
このテクニックはGithub .まず、JavaScriptファイル(RWD Image . js)を取得します.htaccessはfile,no .GIF号(イメージファイル).それから、私たちは高解像度と低解像度をリンクするために少しのHTMLを使用します:最初に、1つの小さなイメージ.Rφ接頭辞(像が反応するべきであることを示すために)、それから、大きいイメージへのリンクdata-fullsrc :

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

480 pxより広いどんなスクリーンのためにでも、高解像度イメージ(Largeres . jpg)は、ロードされます、そして、小さいスクリーン(Smalles . jpg)で.

👉 iPhoneのための興味深い機能

iPhoneとiPod touchは、特別な機能を持って:大画面のために作成されたデザインは、スクロールや追加のモバイルレイアウトせずに小さな解像度でブラウザで簡単に縮小.しかし、画像やテキストは見えません.

ソースtprogger
この問題を解決するために、タグはmeta :

<meta name="viewport" content="width=device-width; initial-scale=1.0">

もしinitial-scale 画像の幅が画面の幅に等しくなります.

👉 カスタマイズ可能なページレイアウト構造

重要なページサイズ変更の場合は、一般的に要素のレイアウトを変更する必要があります.これは便利な別のスタイルシート、またはより効率的に、CSSのメディアクエリを介して行われます.これはほとんどのスタイルが同じままで、問題がないはずです.
たとえば、マスターファイルには#wrapper ,畝#content ,畝#sidebar ,畝#nav 一緒に色、背景、およびフォントと一緒に.あなたの主なスタイルがレイアウトをあまりに狭くて、短くて、広いか、背が高いならば、あなたはそれを定義することができて、新しいスタイルを含むことができます.
*スタイル.CSS (メイン):

/ * Main styles to be inherited by the child stylesheet * /

html,body{
   background...
   font...
   color...
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/ * Structural elements * /
#wrapper{
  width: 80%;
  margin: 0 auto;

  background: #fff;
  padding: 20px;
}

#content{
  width: 54%;
  float: left;
  margin-right: 3%;
}

#sidebar-left{
  width: 20%;
  float: left;
  margin-right: 3%;
}

#sidebar-right{
  width: 20%;
  float: left;
}

※モバイル.CSS (子):

#wrapper{
  width: 90%;
}

#content{
  width: 100%;
}

#sidebar-left{
  width: 100%;
  clear: both;

  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

#sidebar-right{
  width: 100%;
  clear: both;

  /* Additional styling for our new layout */
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

ソースtprogger
ワイドスクリーンでは、左右のサイドパネルがよくフィットします.より狭い画面では、これらのブロックは、より便利にするために、他の下に配置されます.

👉 メディアクエリ

あなたがCSS 3メディア質問を敏感なデザインをつくるために使うことができる方法を見てみましょう.畝min-width 特定のスタイルが適用されるブラウザウィンドウまたはスクリーンの最小幅を設定します.任意の値が1より低い場合min-width , スタイルは無視されます.畝max-width は逆です.
例:

@media screen and (min-width: 600px) {
  .hereIsMyClass {
    width: 30%;
    float: right;
  }
}

メディアクエリは、そのmin-width は600 px以上である.

@media screen and (max-width: 600px) {
  .aClassforSmallScreens {
    clear: both;
    font-size: 1.3em;
  }
}

この場合、スクリーンクラスの幅が600 px以下の場合には( Class ForsScreen ) CountクラスCountが動作します.
一方min-width , また、max-width 画面の幅、およびブラウザウィンドウの幅に適用できます.デバイス幅だけで動作する必要があります.例えば、小さなウィンドウで開いているブラウザを無視する.これを行うには、あなたはmin-device-width また、max-device-width :

@media screen and (max-device-width: 480px) {
  .classForiPhoneDisplay {
    font-size: 1.2em;
  }
}

@media screen and (min-device-width: 768px) {
  .minimumiPadWidth {
    clear: both;
    margin-bottom: 2px solid #ccc;
  }
}

具体的には、計算された問合せに対しては、斜めの方角であることができる.

@media screen and (orientation: landscape) {
  .iPadLandscape {
    width: 30%;
    float: right;
  }
}

@media screen and (orientation: portrait) {
  .iPadPortrait {
    clear: both;
  }
}

また、メディアクエリの値を組み合わせることもできます.

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .classForaMediumScreen {
    background: #cc0000;
    width: 30%;
    float: right;
  }
}

このコードは800〜1200 pxの幅でスクリーンやブラウザのウィンドウでのみ実行されます.
次のようなメディアクエリの異なる値に対して、特定のシートをスタイルで読み込むことができます.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>

👉 ジャバスクリプト

ブラウザがCSS 3メディアクエリをサポートしていない場合、jQueryを使用してスタイルの置換を手配できます.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e){
      var newWindowWidth = $(window).width();

      // If the width is less than 600 px, the mobile stylesheet is used
      if(newWindowWidth < 600){
        $("link[rel=stylesheet]").attr({href : "mobile.css"});
      } else if(newWindowWidth > 600){
        // If the width is more than 600 px, the stylesheet for the desktop is used
        $("link[rel=stylesheet]").attr({href : "style.css"});
      }
    }
  });
</script>

👉 オプションのコンテンツ表示

縮小し、小さな画面に合うように要素を交換できることは素晴らしいです.しかし、これは最良のオプションではありません.モバイルデバイスについては、通常より広範な変更:簡単なナビゲーション、より集中したコンテンツ、リストや行の列の代わりに行があります.

ソースdigg
幸いなことに、CSSは私たちに能力を示し、信じられないほどの容易さとコンテンツを非表示にすることができます.

display: none;

display: none 物が隠れる際に使われる.
例:

ソースtprogger
マークアップです

<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>

<div id="content">
  <h2>Main Content</h2>
</div>

<div id="sidebar-left">
  <h2>A Left Sidebar</h2>
</div>

<div id="sidebar-right">
  <h2>A Right Sidebar</h2>
</div>

メインスタイルシートでは、すべてのコンテンツを表示するのに十分な画面があるため、列参照を変更しています.
*スタイル.CSS (メイン):

#content{
  width: 54%;
  float: left;
  margin-right: 3%;
}

#sidebar-left{
  width: 20%;
  float: left;
  margin-right: 3%;
}

#sidebar-right{
  width: 20%;
  float: left;
}
.sidebar-nav{
  display: none;
}

これでカラムを隠し、リンクを表示します.
※モバイル.CSS (簡略化)

#content{
  width: 100%;
}

#sidebar-left{
  display: none;
}

#sidebar-right{
  display: none;
}
.sidebar-nav{
  display: inline;
}

スクリーンサイズが縮小されるならば、あなたはスクリプトを使うことができます、あるいは、代わりのスタイルファイルは白いスペースを増やすか、より多くの便宜のためにナビゲーションを取り替えます.このように、要素を非表示にして、表示する能力、サイズを変えている絵、要素とはるかにより多くの、あなたはデザインをどんな装置とスクリーンにでも適応させることができます.

続きを読む

この記事を参考にしてください💚 or 👏 あなたの友人がそれから利益を得ることができるように、下でボタンを下で、または、Facebookの上で記事を共有してください.
https://slidetosubscribe.com/raevskymichail/