web-dev-qa-db-ja.com

ウェブサイトをレスポンシブにする最も速い方法は？

以前にZurb FoundationとSkeletonを使用したことがあるので、両方に慣れていますが、既存のWebサイトをレスポンシブWebサイトに変換する必要はありませんでした。私のウェブサイトを変換する最も速い方法は何ですか？上記のようなフレームワークを使用するか、すでに提供されているコードにメディアクエリを追加しますか？ （それでも機能しますか？）

htmlcssresponsive-designmedia-queries
16
Joe Bobby

サポートするデバイスを決定し、次の行に沿ってスタイルシートを追加します。

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

降順かどうかをテストするのが最も簡単です。メディアクエリの例はこちら：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

29
Matthew Darnell

私の場合、レスポンシブスタイルファイルで問題が解決しなかったため、ウェブサイトを最初から書き直す必要があります。スタイルを [〜＃〜] less [〜＃〜] とMatthew Darnellのように、適切なメディアクエリを使用してレスポンシブスタイルシートを作成します。

私はSkeletonに慣れていませんが、Twitter Boostrapはうまく機能します。

3
Full-Stack Software Engineer

少し頭を使って移行するつもりなら、現在存在するプロジェクト（具体的にはコンパスプロジェクト）にFoundationをインストールする方法があります。

最初にコンパスをインストールし、プロジェクトをコンパスプロジェクトに変換する必要があります。これを行う簡単な方法は、コードキットを使用して、プロジェクトフォルダーをコードキットにドラッグアンドドロップすることです。財団のウェブサイトのこのページから、いくつかのターミナルのヒントを入手できます。

http://foundation.zurb.com/docs/sass.html

次に、ターミナルを開いて入力する必要があります

cd /path-to-your-project-folder/

次に入力

compass install -r zurb-foundation foundation

完全にsass（コンパスなし）を使用して、既存のアプリケーションでFoundationを単独で試して使用できますが、GitサイトからFoundationをダウンロードし、1つずつ@scssを@includeする必要があります。上記のページで情報を確認できます。

0
user2533956