/ /既存のサイトデザインをモバイルデバイス用に機能させるのに十分な数のメディアクエリを数時間で習得できますか。 [閉じた] - css、css3

モバイルデバイスで動作するように既存のサイトデザインを適応させるには、数時間で十分なメディアクエリを習得できますか? [閉じた] - css、css3

私はデザイナーではありませんが、CSSで調整するのに十分な知識があります。

私はiphone、androidなどのようなモバイル機器にそれを適応させるためにプロジェクトのために既存のcssデザインの上にメディアクエリを実装する必要があります。

既存のデザインにメディアクエリのサポートを追加するのに十分な時間がかかるまでにどのくらい時間がかかりますか。

質問を閉じないでください、それは私が今のところ私の目的を解決しないかもしれない何かを学ぶのに時間を浪費するのを潜在的に節約するので私が探している特定の答えです。

回答:

回答№1は0

はい、できます。メディアへの問い合わせについて学ぶことはあまりありません。

  1. 彼らはあなたに「ブラウザがこれらの基準を満たすなら(そしてメディアクエリをサポートするなら)このCSSを適用する」と言わせます。

    だから、あなたはいくつかのCSSをデバイスに適用することができます device-width この質問でメディアクエリを使用して480ピクセル以下にします。 ブラウザのスニッフィングなしに、(IEではなく)iPhoneだけにスタイルシートを適用するにはどうすればよいですか。

  2. 多くのメディアクエリ(例: width)の接頭辞を取ることができます max- または min- より小さい/より大きいクエリを許可します。そう、 max-width: 480px 「幅480ピクセル以下のブラウザ」(および ない 「最大幅480ピクセルのブラウザ」)。

  3. あなたはそれらを使用することができます media の属性 <link> スタイルシート全体を条件付きでロードするための要素、または @media CSSのブロックを条件付きで適用するためのスタイルシート内のat-rule。

  4. すべての内蔵iPhoneおよびAndroidブラウザがそれらをサポートしているので、モバイルデバイスに異なるスタイルを提供するのに適した方法です。 (また、通常のスタイルシートに追加することもできます。 防ぐ プロジェクトに適していれば、モバイルブラウザは通常のスタイルシートを適用できません。)

Media Queriesの仕様はここにあり、かなり読みやすいです。

どのメディアクエリを使用するかを考えるのではなく、ほとんどの作業で実際にサイトのデザインをモバイルデバイスに適応させます。