0

I am trying to make a that won't move or distort when I move from one computer to another tablet.

Here is my 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;

}

This is all going to be used later.

This is the html:

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

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

I decided to use tables on my site, bad idea, I'd like something that is scalable, and so far DIVs aren't doing it for me.

What am I missing?

When I use the zoom in/out function, the test 'box' moves around with the border. I tried switching from integers to percentages, no luck. I tried goofing around with the 960 layout, which is where I am now. Been at this for the last 6 hours. no such luck. Thank you so much!

4

1 回答 1

0

您必须使用 HTML5 和 CSS3 媒体查询创建跨浏览器响应式设计。

概述

页面容器的宽度为 980 像素，针对任何大于 1024 像素的分辨率进行了优化。媒体查询用于检查视口是否小于 980px，然后布局将变为流体宽度而不是固定宽度。如果视口比 650px 窄，它会将内容容器和侧边栏扩展为全角以形成单列布局。

您可以在webdesignerwall.com阅读此基本教程

于 2013-07-05T23:41:20.957 回答