以前にZurb FoundationとSkeletonを使用したことがあるので、両方に慣れていますが、既存のWebサイトをレスポンシブWebサイトに変換する必要はありませんでした。私のウェブサイトを変換する最も速い方法は何ですか?上記のようなフレームワークを使用するか、すでに提供されているコードにメディアクエリを追加しますか? (それでも機能しますか?)
サポートするデバイスを決定し、次の行に沿ってスタイルシートを追加します。
/* =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/
私の場合、レスポンシブスタイルファイルで問題が解決しなかったため、ウェブサイトを最初から書き直す必要があります。スタイルを [〜#〜] less [〜#〜] とMatthew Darnellのように、適切なメディアクエリを使用してレスポンシブスタイルシートを作成します。
私はSkeletonに慣れていませんが、Twitter Boostrapはうまく機能します。
少し頭を使って移行するつもりなら、現在存在するプロジェクト(具体的にはコンパスプロジェクト)に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する必要があります。上記のページで情報を確認できます。