缩小时，HTML / CSS会打破div [英] HTML / CSS breaks div when zooming out

查看：99
本文介绍了缩小时，HTML / CSS会打破div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为我父亲设计一个网站，到目前为止，我只是在索引页面的中间。
当我缩小到30％左右时（这只是为了测试），什么让我烦恼，divs坏了，最终不合适（会给你一个例子）。即使divs不能保持为一个整体



我基本上都试过，最小宽度（965px）。有没有办法让它收敛百分比？如果是这样，考虑到宽度最大宽度必须是965px？



我怎么能这样做？我的网站主要用于个人电脑。

另外我使用的是HTML5和CSS3



有一个外部div将全身放入盒子



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





CSS代码如下：

  @charsetutf-8; 
 / * CSS文件* / 
 
 body 
 {
 background：url（pics / bg.jpg）no-repeat center center fixed; 
 
背景颜色：＃282828; 
 font-family：'Sancreek'，草书; 
 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和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; 
颜色：＃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：下划线; 
 margin-left：25px; 
} 
 
 .position 
 {
 margin-left：90px; 
 margin-top：-130px; 
} 
 
 a：visited 
 {
 text-decoration：none; 
颜色：＃000; 
} 
 a：hover 
 {
 text-outline：＃000; 
 outline-color：＃000; 
 outline-width：2px; 
 margin：0 auto; 
}

header.php 

 <！DOCTYPE> 
 
< html> 
< head> 
 
 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< meta name =Copyrightcontent =©Dorienne Grech（DodoSerebro），保留所有权利> 
 < meta name =keywordscontent => 
< title>永远的朋友Lineadancers官方网站< / title> 
< link rel =stylesheettype =text / csshref =generalbackground.css> 
< link rel =stylesheettype =text / csshref =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> <！ - 包含徽标和群组照片的标头 - > 
< div class =logo>< / div> <！ - 徽标 - > 
< div class =groupPhoto>< / div> <！ -  groupPhoto结束 - > 
< / div> <！ - 标题结尾 - > 
 
< div class =mainContent> <！ - 由链接/视频/照片等组成的主体 - > 
 
< div class =menuLinks> <！ - 菜单链接 - > 
< ul class =menuLinks> 
< li class =menuLinks>< a href =index.php>主页< / a>< / li> 
< li class =menuLinks>< a href =about.php>关于< / a>< / li> 
< li class =menuLinks>< a href =dances.php>舞蹈< / a>< / li> 
< li class =menuLinks>< a href =videos.php>影片< / a>< / li> 
< li class =menuLinks>< a href =events.php>事件< / a>< / li> 
< li class =menuLinks>< a href =contact.php>联络< / a>< / li> 
< / ul> 
< / div> <！ -  mainContent的结尾 - >

缩小至30％的结果

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



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



谢谢

解决方案

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



通过简单地添加

  @media（max-width：600px）
 {
 //所有CSS [classes]在屏幕上的变化都会写在这里，例如：
 h1 
 {
 font-size：20px; 
} 
}

当屏幕为600像素或更小（或缩小）h1的字体大小将变为20px，而所有其他CSS将保持最初写入的状态（因为它是父级）



换句话说：



媒体查询只会影响在媒体查询之间写入的那些类（将覆盖原始内容）

I am designing a website for my father and so far I'm midway the index page only. What is bugging me that when I zoom out to around 30% (just for tests sake) The divs are broken and they end up out of place (will show you an example). Also even the divs do not stay as one "whole entity"

I tried basically everything, the min-width (which is 965px). Is there a way to make it round up Percentage wise sort of? If so, how can it be made considering that the width max-width has to be 965px?

My website is mainly for PCs.

Also I am using HTML5 and CSS3

There is one outer div which puts the whole body into a "box"

Warning: My header is in a PHP so is the footer and then I just load them. I will be posting both the header.php and the generalbackground CSS

The CSS Code is this:

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

Result of Zooming out to 30%

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

PS: BROWSER Currently Testing and using is GOOGLE CHROME: Version 29.0.1547.66 m

thanks

解决方案

What I found best people is to use the MEDIA QUERIES

By Simply adding

@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;
}
}

When the screen is 600px or smaller (or zoomed out) the font-size of h1 will change to 20px whereas ALL the other CSS will stay as originally written (as it is the parent)

In other words:

Media queries will ONLY affect those classes written between the media queries (will overwrite the original)

这篇关于缩小时，HTML / CSS会打破div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆