Fatal编程技术网
  • html/
  • HTML网站大小调整问题

HTML网站大小调整问题

html css

HTML网站大小调整问题,html,css,Html,Css,我正在为客户建立一个网站。我的问题是一页。每当页面转到不同大小的查看窗口时，整个页面都会断开。我已经设置了一个视点，甚至尝试切换所有像素值，以显示页面的百分比。然而，这些都没有解决我的问题。下面是我的代码为破碎的网页。我曾尝试使用div标签来尝试创建间距，但它从来都不起作用，无论我尝试什么，我都无法在其他查看平台上正确查看它。这包括手机和浏览器未全屏时 HTML: <!DOCTYPE html> <head> <meta name="viewport" conte

我正在为客户建立一个网站。我的问题是一页。每当页面转到不同大小的查看窗口时，整个页面都会断开。我已经设置了一个视点，甚至尝试切换所有像素值，以显示页面的百分比。然而，这些都没有解决我的问题。下面是我的代码为破碎的网页。我曾尝试使用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>
单独依靠视口来渲染页面不是一个好主意。您应该向代码中添加媒体查询

另外，当将代码放入jsfiddle.net时，没有任何东西会破坏每一个see。看起来它不是移动响应的。

我这边发生的事情是，网站的布局发生了变化，它将不同的分区放在不同的位置。你需要帮助理解响应设计，你的布局不会在不同的屏幕大小中改变，你需要从第一个css代码开始考虑它。然后，当你的布局在某个点中断时，让它流动，插入一个断点这里是我的朋友@Al-x不要评判他，而是给他指出一个方向，帮助他提高你的技能。如果你展示你想要的布局以及到底出了什么问题，这可能会有所帮助。我看不出有什么明显的问题。 
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%
}