Question

我正在为客户建立一个网站。我的问题是一页。每当页面进入不同大小的查看窗口时，整个页面就会中断。我已经设置了一个视点，甚至尝试切换所有像素值，以显示页面的百分比。然而，这些都没有解决我的问题。下面是我破碎网页的代码。我尝试使用div标签尝试创建间距，但它永远不会起作用，无论我尝试什么，我都可以让它在其他观看平台上正确查看。这包括移动设备以及浏览器未全屏显示时。

HTML：

<!DOCTYPE html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>About Us</title>
<script type="text/javascript" src="mainjs.js"></script>
<link rel="stylesheet" href="maincss.css">  
<link rel="shortcut icon" href="tb.jpg">
</head>

<header>
<center>
    <img src="FIMM USA Columbus.jpg" class="logo">
    <p><em><strong>About Us</strong></em></p>
</center>   
</header>

<body>
<hr class="yellowb">
        <table style="width:100%;">
            <th><a href="index.html" class="button">Home</a></th>
            <th><a href="products.html" class="button">Products</a></th>
            <th><a href="about.html" class="button">About Us</a></th>
        </table>        
    <hr class="yellowb1">
<div class="round">
    <center><h3>Important Name Here</h3></center>
        <p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>   
</div>
<div style="float:left;"><img src="gray.jpg"></div> 
<div class="round">
    <center><h3>Important Name Here</h3></center>
        <p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>   
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
    <center><h3>Important Name Here</h3></center>
        <p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>   
</div>
<div style="float:left;"><img src="gray.jpg"></div>     
</body> 

<footer>
</footer>

</html>

CSS：

body {
    background-color: #0d0d0d;
    color: yellow;
    font-family: arial;
    height: 100%;
    padding-left: 15%;
    padding-right: 15%;
}
.logo {
    height: 25%;
    width: 25%;
}
.yellowb {
    background-color: yellow;
    height: 10px;
    width: 100%;
    border: none;
}
.yellowb1 {
    background-color: yellow;
    height: 6px;
    width: 100%;
    border: none;
}
button {
    background-color: yellow;
    color: black;
    height: 40px;
    width: 70px;
}
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    height: 20px;
    width: 80px;
    background-color: yellow;
    color: black;
}
.buildt {
    height: 15%;
    width: 50%;
}
.rightdiv {
    float: right;
    width: 65%;
    height: 40%;
    text-decoration: outline 3px solid yellow;

}
.largery {
    font-size: 30px;
    color: yellow;
    font-family: Arial;
}
.white {
    color: white;
    font-size: 20px;
    text-indent: 50px;
}
.product {
    height: 90%;
    width: 90%;
}
.rline {
    border-left: none;
    border-right: 8px solid yellow;
    border-top: none;
    border-bottom: none;
    width: 34%;
    height: 40%;
    float: left;
}
.ltext {
    width: 100%;
    height: 40.5%;
}
.white1 {
    color: white;
    font-family: arial;
    font-size: 20px;
    text-align: center;
    vertical-align: center;
    text-indent: 45px;
}
.white2 {
    color: white;
    font-family: arial;
    font-size: 14px;
    text-align: center;
    vertical-align: center;
    text-indent: 45px;
}
.scale {
    width: 100%;
    height: 100%;
}
.div1 {
        border: 5px solid yellow;
        padding: 15px;
}
.left {
    padding-left: 10px;
    width: 20%;
}
.right {
    padding-right: 10px;
    width: 20%;
}
.middle {
    width: 55%;
}
.round {
    border-radius: 15px;
    border: 5px solid yellow;
    width: 75%;
    height: 15%; 
    float: right;
}
.round1 {
    border-radius: 15px;
    border: 5px solid yellow;
    width: 100%;
    height: 40%; 
}
.oh {
    width: 100%;
    height: 100%
}

Answer 1

单独依靠视口渲染页面并不是一个好主意。您应该在代码中添加媒体查询。 https://www.w3schools.com/css/css3_mediaqueries.asp

此外，当将该代码放入jsfiddle.net时，每次看到的内容都没有“破解”。它看起来似乎没有移动响应。

HTML网站调整大小问题

1 个答案: