このサイトをモバイルサイトに変換する方法や液体にする方法は？

Question

静的ページを携帯ページに変換する方法があるのだろうか？モバイルページでは、デスクトップコンテンツを小さなウィンドウサイズ（スマートフォンサイズ：320ピクセルなど）にドラッグできるようにすることを意味します。ウィンドウのサイズに合わせてコンテンツを作成しますか？どのようにCSSを変更する必要がありますか？どのように私は数学を作る必要がありますか？おかげさま...これを可能にするためのフレームワークやツールが必要であると思いますか？

Plsいくつかのガイドと思考は歓迎される以上のものになります。

年の時間のための私のこの静的example

感謝をチェック！ Y/

Answer 1

@Yoni;あなたは、そのメディアクエリーで

であなたのCSSを定義するためにmediaqueriesを使用しますが、他のリンクもhttp://css-tricks.com/6206-resolution-specific-stylesheets/、http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Answer 2

Media Queriesを使用できます。詳細については、Responsive Web Design: What It Is and How To Use Itを参照してください。

私は、何も配置しないで最初にウェブサイトをデザインすることをお勧めします。ちょうどそれを洗練されたものにして、タイポグラフィ、色などを決めてください（ie：design.css）。

次に、メディアクエリを使用して適切な配置を開始します。ビューポートのために少なくとも960個のピクセルの幅（すなわち：デザイン960.css）、それはこのようになります：

最大で359個のピクセルの幅のビューポートのための

@media only screen and (min-width: 960px) 
{ 
    // [...] 
} 

（すなわち：デザイン240.css）それは見てみましょうこのように：

@media only screen and (max-width: 359px) 
{ 
    // [...] 
} 

などです。適切なスケールでモバイルデバイス上でレンダリングするように、フォローコードが必要になります。

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