Question

所以，我的朋友和我正在研究一个名为Minecraft的游戏的mod，我有责任建立一个网站，我们发布这个mod并告诉每个人这个mod是什么。

我目前面临的问题是我不能让我的对象缩小/增长以适应任何浏览器分辨率/窗口分辨率。目前，我有它所以它被格式化为我的屏幕分辨率（1920 x 1080），它似乎很好，但当我使窗口更小，我必须使用水平滚动条来到html页面上的不同区域

当我缩小窗口时，我希望它适合那个窗口。

与屏幕监视器相同。如果它不是我的屏幕分辨率，则必须使用水平滚动条。

如何制作，以便我的页面对象根据窗口大小/分辨率大小改变大小？

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"</meta>

        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="MOPM-ico/favicon-144.png">
        <meta name="msapplication-config" content="MOPM-ico/browserconfig.xml">

        <link rel="shortcut icon" href="MOPM-ico/favicon.ico">
        <link rel="icon" sizes="16x16 32x32 64x64" href="MOPM-ico/favicon.ico">
        <link rel="icon" type="image/png" sizes="310x310" href="MOPM-ico/favicon-310.png">
        <link rel="icon" type="image/png" sizes="196x196" href="MOPM-ico/favicon-196.png">
        <link rel="icon" type="image/png" sizes="160x160" href="MOPM-ico/favicon-160.png">
        <link rel="icon" type="image/png" sizes="96x96" href="MOPM-ico/favicon-96.png">
        <link rel="icon" type="image/png" sizes="64x64" href="MOPM-ico/favicon-64.png">
        <link rel="icon" type="image/png" sizes="32x32" href="MOPM-ico/favicon-32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="MOPM-ico/favicon-16.png">
        <link rel="apple-touch-icon" sizes="152x152" href="MOPM-ico/favicon-152.png">
        <link rel="apple-touch-icon" sizes="144x144" href="MOPM-ico/favicon-144.png">
        <link rel="apple-touch-icon" sizes="120x120" href="MOPM-ico/favicon-120.png">
        <link rel="apple-touch-icon" sizes="114x114" href="MOPM-ico/favicon-114.png">
        <link rel="apple-touch-icon" sizes="76x76" href="MOPM-ico/favicon-76.png">
        <link rel="apple-touch-icon" sizes="72x72" href="MOPM-ico/favicon-72.png">
        <link rel="apple-touch-icon" href="MOPM-ico/favicon-57.png">

        <link type="text/css" rel="stylesheet" href="styles.css" />

        <title>
            MOPM~
        </title>

    </head>

    <body>
        <header>
            <!--header-->
            <div class="topHead">
                <img id="headertxt" src="pictures/header.png" width="1919px" height="120px"/>
            </div>

            <!--header buttons-->
                <div class="headButtonSeperator">
                <div class="headButton">home</div>
                <div class="headButton">about</div>
                <div class="headButton">mod info</div>
                <div class="headButton">downloads</div>
                <div class="headButton">videos</div>
                <div class="headButton">links</div>
                <div class="headButton">dev team</div>
            </div>
        </header>

        <!--content-->
        <div id="home">

        </div>
    </body>
</html>

CSS：

body
{
    background-image: url('pictures/background.png');
}

/*--Classes--*/
.topHead
{
    width: 1919px;
    height: 120px;
    background-color: #272B30;
    float: middle;
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    display: block;
    border-bottom: 4px dashed #1EC20B;
}

.headButtonSeperator
{
    width: 980px;
    height: 40px;
    background-color: none;
    position: absolute;
    top: 125px;
    left: 509px;
}

.headButton
{
    width: 120px;
    height: 10px;
    background-color: #313A3D;
    margin-left: 5px;
    display: inline-block;
    float: left;
    font-size: 0px;

    border-left: 3px solid #282E30;
    border-bottom: 3px solid #282E30;

    border-bottom-left-radius: 20px;
}


.headButton:hover
{
    width: 140px;
    height: 35px;
    background-color: #313A3D;
    margin-left: 10px;
    position: relative;
    display: inline-block;

    color: #DB481B;
    font-size: 20px;
    text-align: center;
    line-height: 35px;
    font-family: minecraft;
    text-shadow: 2px 2px #7A5E55;

    border-left: 3px solid #282E30;
    border-bottom: 3px solid #282E30;
    border-bottom-left-radius: 20px;
}

/*--ID's--*/
#home
{
    display: block;
    width: 918px;
    height: 1000px;
    background-color: white;
    position: absolute;
    top: 500px;
    left: 500px;
    float: middle;
    z-index: -1;
}

/*--Fonts--*/
@font-face
{
        font-family: minecraft;
        src: url(fonts/minecraft.ttf);
}

@font-face
{
        font-family: McBold;
        src: url(fonts/ARCADEPI.ttf);
}

@font-face
{
        font-family: McBlock;
        src: url(fonts/Square.ttf);
}


@font-face
{
        font-family: MccBlock;
        src: url(fonts/Squareo.ttf);
}

修改我没有得到任何答案，我真的想完成这个，所以我可以在页面的其他方面工作。

我需要使用百分比吗？根据分辨率/窗口大小，我做错了什么呢？

修改所以我现在明白，我必须通过不使用px来使我的页面响应我究竟如何使其响应以及我可以使用哪些测量？

编辑：我做了一些百分比的测试，似乎没有用。在这张图片中，我正在测试宽度为100％的头横幅宽度我把窗口缩小了，顶部的措辞（图像）没有缩小到窗口的大小。

~~http://prntscr.com/47v2ub＆lt; --- image~~

修改更新以上编辑：我发现我必须使＆gt; .topHead也有一个＆gt;宽度：100

我现在面临的问题是，如果浏览器太小，我的所有按钮都会结束

Answer 1

要使页面响应，您需要牢记两件事：

请勿在页面上使用width和其他维度的固定数量（例如px）。
如果您这样做，请使用Media Queries控件，以便根据屏幕尺寸的变化更改页面上的样式。

HTML / CSS在任何窗口大小/分辨率上拟合对象/所有内容

1 个答案: