Question

我正在为我父亲设计一个网站，到目前为止，我只在索引页面中途。当我缩小到30％左右时（这只是为了测试的缘故），div会被打破并且它们最终不合适（将向您展示一个例子）。甚至连div也不会成为一个“整体”

我基本上尝试了一切，最小宽度（即965px）。有没有办法让它成为百分比明智的那种？如果是这样，考虑到宽度最大宽度必须是965px？

，怎么办呢？

我的网站主要面向个人电脑。

我也在使用HTML5和CSS3

有一个外部div将整个身体放入“盒子”

警告：我的标题是在PHP中，所以是页脚，然后我只是加载它们。我将发布header.php和generalbackground CSS

CSS代码就是这样：

@charset "utf-8";
/* CSS Document */

body
{
    background:url(pics/bg.jpg) no-repeat center center fixed;

    background-color:#282828;
    font-family: 'Sancreek', cursive;
    min-width:965px;
    margin: 0 auto;
}
.bodyoutline
{
    min-width:100%  ;
}
div.upperbody
{
    background:url('pics/topbg.png') no-repeat center center;
    width:965px;
    height:100px;
    margin: 0 auto;
}
div.body
{
    background:url('pics/divbg.png') no-repeat center center fixed;
    width:965px;
    height:1304px;
    margin: 0 auto;
    margin-top:-25px;
    }

div.header
{
    background:url('pics/header.png');  
    width:965px;
    margin: 0 auto;
    height: 319px;
    overflow:hidden;    
}

div.logo
{
    background:url('pics/logo.png');
    width: 220px;
    height: 215px;
    float:left;
    margin-left:20px;
    margin-top:20px;    
}

div.groupPhoto
{
    background:url('pics/group.png');
    float:right;
    margin-right:30px;
    width:552px;
    height:244px;
    margin-top:30px;
    transform: rotate(12deg);
    -ms-transform: rotate(12deg); /* IE 9 */
    -webkit-transform: rotate(12deg); /* Safari and Chrome */
}

div.mainContent
{
    width:965px;
    margin: 0 auto;
    float:left;
}

div.menuLinks
{
    width:965px;
    margin: 0 auto;
    text-align:center;
}


ul,li.menuLinks
{
    width:965px;
    margin: 0 auto;
    display:inline;
    font-size: 38px;    
    padding: 10px;
    color: #39100a;
    font-weight:bold;
}
div.separator
{
    width:965px;
    text-align:center;
    margin:0 auto;
    height:50px;
}

div.box
{
    width:965px;
    margin: 0 auto;

}

div.updec
{
    background:url('pics/updec.png') center no-repeat;
    width: 965px;
    height: 202px;
}

h1.titles
{
    margin-left:75px;
    font-size:30px;
}
h1.ePhotos
{
    float:left;
    font-size:18px;
    text-decoration:underline;
    margin-left:25px;
}

.position
{
    margin-left:90px;
    margin-top:-130px;
}

a:visited
{
    text-decoration:none;
    color:#000; 
}
a:hover
{
    text-outline:#000;
    outline-color:#000;
    outline-width:2px;
    margin: 0 auto;
}

的header.php

<!DOCTYPE>

<html>
<head>  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">  
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>


</head>

<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">

    <div class="header"> <!-- Header containing Logo and Group Photo -->
        <div class="logo"></div> <!-- Logo -->
        <div class="groupPhoto"></div> <!-- end of groupPhoto -->
    </div> <!--End of header -->

    <div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->

        <div class="menuLinks"> <!-- Menu Links -->
            <ul class="menuLinks">
                <li class="menuLinks"><a href="index.php">Home</a></li>
                <li class="menuLinks"><a href="about.php">About</a></li>
                <li class="menuLinks"><a href="dances.php">Dances</a></li>
                <li class="menuLinks"><a href="videos.php"> Videos </a></li>
                <li class="menuLinks"><a href="events.php">Events </a></li>
                <li class="menuLinks"><a href="contact.php">Contact</a></li>
             </ul>
         </div> <!-- end of mainContent -->

缩小至30％的结果

http://imageshack.us/photo/my-images/571/y1bw.jpg/

PS：浏览器目前正在测试和使用的是GOOGLE CHROME：版本29.0.1547.66 m

感谢

Answer 1

最佳做法是

.bodyoutline
{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

这将使您的所有元素都在div中并始终对齐，无论放大还是缩小。

Answer 2

我发现最好的人是使用MEDIA QUERIES

简单地添加

@media (max-width: 600px)
{
  //All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
  font-size:20px;
}
}

当屏幕为600px或更小（或缩小）时，h1的字体大小将更改为20px，而所有其他CSS将保持原始写入（因为它是父级）

换句话说：

媒体查询只会影响媒体查询之间写的那些类（将覆盖原文）

缩小时HTML / CSS会破坏div

2 个答案: