我只是想知道如何在Windows中为Snap模式更好地优化我的网站（它只是一个项目，而不是真实的）。每当我进入该模式时，它都会搞砸整个网页（见附图）。
谢谢Jacob
http://i.stack.imgur.com/V4yF2.jpg
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel ="stylesheet">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
<a href = "#"> About Me </a>
</li>
<li>
<a href = "#"> Contact Me </a>
</li>
<li>
<a href = "#"> Pricing </a>
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website? </h1>
<p> Look no further </p>
</div>
</div>
</div>
<div id ="white">
<h1> Qualities </h1>
<h3> What makes me unique? </h3>
</div>
<div id ="gray">
</div>
<div class ="des" >
<div class ="row">
<div class= "col-md-4">
<h2> Knowledge. </h2>
<p> Straight 'outta Compton 1231231231231231231231231231231231231231231231231231231231 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Commitment. </h2>
<p> To excellence and to serve as a value resource 123123123123123123123123123123123123 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Perspective. </h2>
<p> New outlook on your web designs 12312312312311111111111111111111111111111111111111111 </p>
<br>
</div>
</div>
</div>
</body>
<footer>
<div id ='footer'>
</div>
<div id ='footer1'>
<p> Copyright @2014-2015 Jacob Platin </p>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.des {
position: absolute;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
text-align: center;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 17px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 85px;
z-index: 1;
box-shadow: 1px 1px 5px black;
}
.nav a {
text-decoration: none;
color: black;
font-weight: 700;
color: white;
}
.jumbotron {
position:relative;
background-image: url(http://www.welivesecurity.com/wp-content/uploads/2013/01/012838004-printed-internet-html-code-tec.jpg);
width: 100%;
height: 530px;
}
#h1 > h1 {
color:#660000;
text-align:left ;
padding-top: 34px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
}
#h1 > p {
color:white;
text-align:left ;
padding-left: 5px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
font-weight: 300;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 1902px;
height: 170px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: absolute;
top: 1300px;
}
#footer1 {
height: 85px;
width: 1902px;
background-color: #660000;
position: absolute;
margin-top: 0px;
box-shadow: -4px -2px 9px black;
top: 1300px;
}
#footer1 > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 42px;
text-align: center;
padding-left: 205px;
}
#facebook {
margin-left: 820px;
position: absolute;
bottom: 3px;
top: 95px;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
#h1 {
box-shadow: -1px -1px -32px black;
}
#gray {
width: 100%;
height: 300px;
background-color: #f7f7f7;
position: absolute;
z-index: -11;
margin-top: 0px;
}
#white > h1 {
z-index: 1;
padding-bottom: 100px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
text-align: center;
}
#white > h3 {
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
position: absolute;
bottom: 230px;
text-align:center;
z-index: 0;
margin-left: 43.3%;
}
.row {
padding-left: 56px;
z-index:-1;
}
答案 0 :(得分：0)
您是指通过捕捉（占据屏幕宽度的50％）调整网站大小？如果您希望您的网站能够使用任何屏幕宽度，您需要使用流体容器和媒体查询，这构成了响应式网页设计的概念。
从您看来，您的网站使用的是固定宽度，这限制了您在捕捉时使用浏览器重新调整内容大小的能力。
响应式网页设计需要从一开始就进行整合，更新现有网站可能会很烦人（但仍有可能）。我建议您查看本教程/概述：http://www.w3schools.com/html/html_responsive.asp
简而言之，为了修复您的网站，您需要摆脱已设置的固定宽度（以像素为单位）并使用百分比，因为它们会根据可用宽度进行调整。