求高手，模仿百度页面，页面缩小之后为什么排版都变了，应该怎样布局才不会乱！_html/css_WEB-ITnose

新手一枚。模仿百度页面，之前用了 相对定位和绝对定位写了一个，也缩小就乱了。这个用的是div之间margin距离排版，缩小了还是不行。怎样设计才能比较好排版，缩小之后能达到百度首页那样的缩放效果。。（不要让我审查元素看百度的源代码，实在看不出什么）！！求解...

        注册        登陆        搜索设置|    
    
        
            
        
            新 闻            网 页            贴 吧            知 道            音 乐            图 片            视 频            地 图        
        
            
                
        
        
            百科            文库            hao123|            更多>>>        
    
    
        
            把百度设为首页        
        
            加入百度推广|            搜索风云榜|            关于百度|            About Baidu        
        
            @2014 Baidu使用前必读京ICP认证030173号        
    

body{    margin: 0px;    padding: 0px;}/*以下是第一个div块，以及其中字体样式*/#head{     height: 20px;}#head a{    float:right;    padding: 7px;    font-size: 12px;}/*以下是第二div块样式*/#mid{    text-align: center;}/*目的是设置图片距离下面导航栏的距离*/#image{    margin: 8px;}/*“网页”样式*/#web{    text-decoration: none;    font-weight:bold;    color:black;}/*输入框上面导航栏的style*/#firstRow{    padding: 10px;    margin-left:-90px;}/*导航栏链接文字之间的距离*/#firstRow a{    padding: 5px;}/*输入框栏的style*/#secondRow{}#txt{    width: 490px;    height:22px;}#btn{    height:28px;    font-size: 14px;    border-radius: 2px;}#thirdRow{    margin: 30px;}#fifthRow{    margin-top: 16px;}#foot{    text-align:center;    margin-top:520px;}#fourthRow,#fifthRow{    font-size: 12px;}#sixthRow{    font-size: 12px;    color:dimgray;    margin-top:6px;}#sixthRow a{    color:dimgray;}

回复讨论(解决方案)

高手在哪里。。。。

去找找响应式网页设计

http://www.baidu.com/link?url=2Z-Ju6mQh7cZIvvEJo7dCz5LyjeF44H1h1Uby0RF51gIx0mLc1uxTn60iOlfdIZqXzlcp_j3IoxCoezq4a97DK

楼上的说的太高深和专业了，有没有其他方法，直接在排版的时候能达到百度那样的效果

应该不是响应式解决方法。样式用的绝对宽带，放大时肯定会撑破页面布局。

在chrome下亲测，你的代码还是可以接受的。如果要禁用页面端的缩放，试试捕捉onresize事件。

var size = [window.width,window.height];
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});