2

ウェブページ [レスポンシブ] をデザインしています。画面の最小幅は 480 ピクセルにする必要があります。どうすればいいのですか？

現在、幅を 480px に固定しています。これは、携帯電話では完璧に見えますが、タブレットではかなり大きく見えます。大画面の場合、幅は動的に変更する必要があります。

4

4 に答える 4

3

min-widthビューポートのメタ タグに追加するポリフィルを作成しました。

https://github.com/brendanlong/viewport-min-width-polyfill

それを使用する場合は、次のことを行うことができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=480"/>
<script type="text/javascript" src="viewport-min-width.js"></script>

の場合、ビューポートを静的な幅に置き換えることで機能しますscreen.width < minWidth。モバイルの Firefox と Chrome でテストしましたが、聞いた限りでは Safari でも動作するはずです。

于 2016-12-06T20:47:44.777 に答える
1

ビュー ポート メタ タグの最小幅

<meta name="viewport" content="width=480">

また

@-o-viewport {
  width: 480px;
}

レスポンシブデザイン用

<meta name="viewport" content="width=device-width, initial-scale=1.0">

メディア クエリの使用

@media screen and (max-width: 480px) {
    css
}

メディア クエリ
ビュー ポート

于 2013-03-25T07:09:24.257 に答える
0

あなたが今と同じように、デスクトップCSSをすべて通常どおりに配置してください。次に、メディア クエリを使用して、新しい css 要素を呼び出します。

@media screen and (max-width: 480px) {
    //all of your mobile styling
}

media="screen"また、あなたのスタイルシートを呼び出す場所に追加します<head> rel="stylesheet"

素晴らしいチュートリアルもここにあります http://css-tricks.com/css-media-queries/

于 2013-03-25T07:05:31.927 に答える
-1

@mediaクエリは間違いなく必要なものです。サイトを表示しているビューポートのサイズに応じて、さまざまな CSS を実行できます。

このサイトには、@mediaうまく機能する優れたクエリ テンプレートがあります。

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

ただし、一般的には、まずデスクトップ バージョンのスタイルを設定することから始めます。@media次に、上記のリンクで定義されている適切なクエリの下で変更を加えます。始めるのに良い場所だと思います！

于 2013-03-25T07:10:18.230 に答える