デバイス間の要素のサイズを固定する方法

-2

現実の視点から固定サイズの要素、たとえば誰でも見ている人のために、6 x 3 cmとしたい。だから私はそれを400×200ピクセルに設定してから、この要素の周りのレイアウトを変更します（小さなディスプレイの場合は1列の表示など）デバイス間の要素のサイズを固定する方法

デスクトップブラウザのサイズを変更すると、レイアウトは変わりますが、devツールを開いてモバイルデバイスをシミュレートすると、その要素ははるかに小さく見えます。

デバイス間で要素の（実際の）サイズを簡単に修正する方法はありますか？

私は本当にこれに固執しています（私は非常に簡単です）。何か助けがあれば幸いです！例えば

：

This is what I'm talking about

出典

2016-08-02 Mark

、スタックオーバーフローを歓迎します。ここで質問をするときは、コードの[最小、完全、および検証可能な例]（http://stackoverflow.com/help/mcve）を表示することをお勧めします。あなたの質問では、いくつかの山括弧が付いたページのようなアイコンを使ってコードスニペットを作成することができます。がんばろう！ – jonju

はあなたが –

こんにちはマークを試したいものは何でもここにコードを貼り付けます

<button type="submit" class="btn btn-primary btn-sm btn-block visible-xs">My button</button> <button type="submit" class="btn btn-primary btn-lg btn-block visible-sm visible-md visible-lg">My button</button>

–

EDIT /（追加した画像を見た後）CHANGED ANSWER：

最初のステップとして、あなたのHTMLコードの<head>タグにこれを置く：ページがズームされることはありません

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

ビューポート（つまり、モバイル画面）のサイズをもう少し小さくしてください。

、あなたはこの動作を取得するには2つの方法が...メディアクエリを使用する方法について

出典

2016-08-02 10:21:37 Johannes

cmを使用した場合と同じ効果があるようです。 – Mark

ありがとう！それはそれだった。 – Mark

@media(max-width:480px){ 
    .test{ 
    width:100%; /*as per your requirement*/ 
    height:500px; 
    }

}

NOTEあなたのCSSでこれを追加します。この1つは480PXで最大と特定のデバイスのためである、あなたが他を追加することができますサイズもあまり同じように。そしてあなたの要求に従ってwidth & heightの値を変更することを忘れないでください。

出典

2016-08-02 10:19:14 jonju

ありがとうございます - ルールを追加しましたが、違いはありませんでしたか？ – Mark

'480メディアではなく' @media（max-width：480px）であると仮定します。それをあなたに変更しましたか？あなたはまた、ヨハネスのように 'viewport'メタタグを含める必要があることを忘れないでください。 – jonju

ああ、それは私が欠けていたものでした。ありがとう。 – Mark

を読む：自分のメディアクエリー http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

の書き方を学ぶ

をブートストラップhttp://getbootstrap.com/のようなフレームワークを使用し、可視性クラスを管理する

あなたのCSSとHTML

出典

2016-08-02 10:25:23 Luca

ビヘイビアは、ビューポートのサイズだけでなく、デバイスによっても異なります。メディアクエリーについては基本的に理解していますが、この場合の書き込み方法はわかりません。 – Mark

「ビヘイビア"？ – Luca

表示されているdivのサイズ（表示） – Mark

デバイス間の要素のサイズを固定する方法

答えて

関連する問題