0

こんにちは、メディア クエリを使用してレスポンシブ Web ページを開発中です。

ここでは、最小幅と最大幅が異なるスマートフォン、タブレットなどの多くのデバイスを確認する必要があります。

例えば ​​：

/* Smartphones (portrait and landscape) ----------- */
   @media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
    /* Styles */
       }

  /* Desktops and laptops ----------- */
   @media only screen 
   and (min-width : 1224px) {
     /* Styles */
    }

ご覧のとおり、さまざまな幅を確認する必要があります。

だから私が探しているのは、ブラウザでカスタムの最小幅と最大幅を指定できるオプションを見つけることができるので、その幅にデザインを入れて、必要に応じて配置することができますか?

4

6 に答える 6

1

Chrome を使用して、インスペクト エレメント ctrl+shift+I の下に移動し、右下の歯車ボタンの ovverides メニューで、デバイス メトリックから CSS メディアのエミュレーション (画面、印刷) まで、多くのテスト値を有効にできます。の上。

グーグルの説明へのリンク。

于 2013-11-14T10:55:49.983 に答える
0

最近のバージョンの Firefox にはレスポンシブ デザイン ビューが組み込まれていCtrl + Shift + Mます。

Internet Explorer では、 を押しF12て開発者ツールを起動し、[ツール] > [サイズ変更] にアクセスして、ウィンドウ サイズを選択するか、カスタム サイズを入力します。

于 2013-11-14T11:00:06.763 に答える
0

screenflyを使用してサイトをテストしています

于 2013-11-14T10:51:02.457 に答える
0 
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

そしてリップルを使う

于 2013-11-14T10:52:17.823 に答える
0

Respondtest.netを使用するか(ローカル プロジェクトでも作業します)、またはgithubからダウンロードできます。

于 2013-11-14T10:59:16.700 に答える
0

body タグの onload イベントで実行される JavaScript 関数を記述して、jQuery の組み込み関数 width() および height() を使用して画面の幅とサイズをチェックし、body 要素のサイズをチェックできます。

次に、if ステートメントを使用して、この jQuery 関数でさまざまなスタイル シートを読み込むことができます。

例

$("body").load(function() { $("link[rel=stylesheet]").attr({href : "style2.css"}); });

私はそれをテストしていませんが、うまくいくはずです。

于 2013-11-14T11:04:38.930 に答える