HTML/CSS-奇怪的大小调整？_Html_Css_Window_Size

HTML/CSS-奇怪的大小调整？

html css

HTML/CSS-奇怪的大小调整？,html,css,window,size,Html,Css,Window,Size,我正在制作一个网站，但我想它的大小，当我改变我的窗口大小所以我做的每件事都是按百分比的有人能解释为什么它的行为仍然如此怪异，以及如何修复它吗代码：不使用左边、右边、顶部和底部的边距，只使用左边、右边、顶部和底部属性看看我做了什么 <!DOCTYPE html> <head> <style type="text/css"> html { height: 100%; background-c

我正在制作一个网站，但我想它的大小，当我改变我的窗口大小

所以我做的每件事都是按百分比的

有人能解释为什么它的行为仍然如此怪异，以及如何修复它吗

代码：

不使用左边、右边、顶部和底部的边距，只使用左边、右边、顶部和底部属性

看看我做了什么

<!DOCTYPE html>
        <head>
        <style type="text/css">
html {
        height: 100%;
        background-color: #272C34;
        margin: 0%;
        padding: 0%;
}

body{
        height: 100%;
        position: static;
        margin: 0%;
        padding: 0%;
}

#whitetop {
        width: 100%;
        height: 4%;
        position: absolute;
        background-color: #E8E8E7;
        top: 10%;
       left: 0%;
        right: 0%;
        bottom: -10%;
        padding: 0%;
        z-index: 1;
}

#whitebot {
        width: 100%;
        height: 30%;
        position: absolute;
        background-color: #E8E8E7;
        top: 32%;
        left: 0%;
        right: 0%;
        bottom: -32%;
        padding: 0%;
        z-index: 1;
}

#earth {
        width: 100%;
        height: 20%;
        position: absolute;
       top: 10%;
        left: 0%;
        right: 0%;
        bottom: -10%;
        z-index: 0;
}

        </style>
                <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
                <title>Home</title>
        </head>
        <body>
                <div id="whitetop">
                </div>
                <div id="whitebot">
                </div>
                <img src="earth2.jpg"/ id="earth">
        </body>
</html>


html{
身高：100%；
背景色：#272C34；
利润率：0%；
填充：0%；
}
身体{
身高：100%；
位置：静态；
利润率：0%；
填充：0%；
}
#白顶{
宽度：100%；
身高：4%；
位置：绝对位置；
背景色：#E8E8E7；
排名前10%；
左：0%；
右：0%；
底部-10%；
填充：0%；
z指数：1；
}
#白机器人{
宽度：100%；
身高：30%；
位置：绝对位置；
背景色：#E8E8E7；
最高：32%；
左：0%；
右：0%；
底部-32%；
填充：0%；
z指数：1；
}
#土{
宽度：100%；
身高：20%；
位置：绝对位置；
排名前10%；
左：0%；
右：0%；
底部-10%；
z指数：0；
}
家

您应该看看CSS媒体查询

调整尺寸的基本思路是：宽度大于960的屏幕=PC，960及以下的屏幕被视为移动或iPad

@media screen and (max-width: 960px) { 
    From this point you start making everything in % for the mobiles and iPads
}

有什么奇怪的行为？我试过了，但是一切看起来都很奇怪..嗯。然后看看这里的媒体查询，希望它会help@SanderSpoelstra你能解释一下什么东西这么奇怪吗？我想我已经修好了。