如何在設備上修復元素的大小

-2

我想要一個從現實角度來看具有固定大小的元素 - 比如說6 x 3釐米 - 無論誰在查看它。所以我將它設置爲400×200像素 - 然後改變我解決此元素的佈局（單柱顯示爲較小的顯示器等）如何在設備上修復元素的大小

當我改變我的桌面瀏覽器的大小也能正常工作 - 元素出現相同，但佈局更改 - 但是當我打開開發工具並模擬移動設備時，元素顯得小得多。

是否有任何簡單的方法來修復跨設備元素的（現實世界）大小？

我真的卡在這（我敢肯定，很簡單的）點，因此任何幫助，將不勝感激！

例如：

This is what I'm talking about

來源

2016-08-02 Mark

哪裏是你的CSS和HTML – jonju

粘貼在這裏你的代碼你會嘗試 –

嗨，馬克，歡迎堆棧溢出。當在這裏提出問題時，通常會顯示代碼的[Minimal，Complete，and Verifiable示例]（http://stackoverflow.com/help/mcve）。在你的問題中，你可以使用圖標來創建一個代碼片段，該圖標看起來像一個帶有一些尖括號的頁面。祝你好運！ –

編輯的/改變ANSWER（看到你添加的圖片後）：

作爲第一步，把這個成<head>標籤的HTML代碼：

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

的頁面不會被放大如果你添加的話，再減到視口的大小（即移動屏幕）。

然後閱讀有關如何使用媒體查詢...

來源

2016-08-02 10:21:37 Johannes

當我使用cm時，似乎有相同的效果。 – Mark

謝謝！就是這樣。 – Mark

在你的CSS添加此

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

}

注：這個人是用480像素最大特定的設備，你可以添加其他大小也一樣。並且不要忘記根據您的要求更改width & height的值。

來源

2016-08-02 10:19:14 jonju

謝謝 - 我添加了規則，但它似乎沒有任何區別？ – Mark

它假設是@media（max-width：480px）'not'480'。你是否改變了。記住你還需要包括Johannes提到的'viewport'元標記 – jonju

啊，是的，那是我錯過了。謝謝。 – Mark

你有2種方式來獲得這一行爲：

學習如何編寫自己的媒體查詢 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
使用一個框架像引導http://getbootstrap.com/和管理可視性類

<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>

來源

2016-08-02 10:25:23 Luca

行爲是不同的，這取決於設備，而不僅僅是視口的大小 - 我對媒體查詢有什麼基本的瞭解，但我不確定如何在這種情況下編寫它們 – Mark

你對「行爲「？ – Luca

顯示div的大小（外觀） – Mark

如何在設備上修復元素的大小

回答

相關問題