如何獲得使用不同屏幕尺寸或縮放時不會移動的div

Question

當我從一台計算機移動到另一台平板電腦時，我試圖使它不會移動或變形。

這是我的CSS。

.container_12,.container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
border: 1px solid black;
}

.container_1 .grid_1{
width: 300px;
margin: 0 0 0 300px;

}

這一切將在以后使用。

這是html：

<div class="container_1">
<div class="grid_1">

test<br> test<br>test
</div>
</div>

我決定在我的網站上使用表格，這是一個不好的主意，我想要一個可擴展的東西，到目前為止，DIV並沒有為我做這件事。

我想念什么？

當我使用放大/縮小功能時，測試“框”會隨着邊框移動。 我嘗試從整數切換為百分比，沒有運氣。 我嘗試使用960布局來解決問題，這就是我現在的位置。 最近6個小時一直在此用餐。 沒有這種運氣。 非常感謝！

Answer 1

您必須使用HTML5和CSS3媒體查詢創建跨瀏覽器的響應式設計。

總覽

該頁面的容器的寬度為980像素，已針對大於1024像素的任何分辨率進行了優化。 媒體查詢用於檢查視口是否小於980像素，然后布局將變為流體寬度而不是固定寬度。 如果視口的寬度小於650像素，則會將內容容器和側邊欄擴展到全角以形成單列布局。

您可以在webdesignerwall.com上閱讀此基本教程。