Question

我正在创建一个网站，我正在尝试使所有元素都符合所有分辨率。它在我的计算机上看起来很好，但在另一台具有不同分辨率的计算机上，网站不适合，它太大或太小。

HTML：

<html>
<head>
<link type="text/css" rel="stylesheet" href="logonav.css" />
<title> Homepage </title>
</head>
<body class="Homepage">
<div id="container">
</div>
        <h1> <href="#" id="logo"><img src="https://imagizer.imageshack.us/v2/327x238q90/911/g22OQa.png" alt> </a> </h1>

        <!-- Navigation bar -->

        <nav id="nav">
        <ul>
        <li class="horizontal">
            <a href="homepage.html">Home</a>
        </li>
        <li class="horizontal">
            <a href="products.html">Products</a>
        </li>
        <li class="horizontal">
            <a href="aboutus.html">About Us</a>
        </li>
        <li class="horizontal">
            <a href="contact.html">Contact</a>
        </li>
        </ul>
        </nav>
    </div>

CSS:
    html, body {
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
}
#container {
    background-image:      url("https://imagizer.imageshack.us/v2/846x529q90/910/6KfCc2.jpg");
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    }
h1 {
    position: absolute;
    top: -50px;
    left: 625px;
    width: 100%;
    height: 100%;
}
nav { 
    text-align: center;
    position: fixed;
    top: 100px;
    left: 10px;
    width: 100%;
}
.horizontal {
    display: inline;
    margin: 100px;
    font-family: "Times New Roman";
    font-size: 30px;
}
a {
    text-decoration: none;
    color: #C3943C;
}
li:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    right: -10px;
    left: 730px;
    border-bottom: 2px solid green;
    margin: 0 auto;
}
li:after{
    content: "";
    position: absolute;
    width: 48%;
    height: 3px;
    bottom: 0;
    left: -225px;
    right: 945px;
    border-bottom: 2px solid green;
    margin: 0 auto;
}

CSS / HTML使所有元素都适合所有分辨率

0 个答案: