jquery - 我怎样才能分开容器，以免它们在移动设备上重叠？

Question

我完成了一个水平滚动网站的构建，花了很长时间才正确排列所有内容，并通过滚动将其横向移动。现在我注意到在移动设备上，有些元素相互重叠。我尝试了许多不同的代码来让它们到达它们应该在移动设备上的位置，但是它们在计算机上就没有了。我怎样才能阻止这些容器 div 重叠？

我的网站上发生这种情况最多的是 http://padmorejordan.com/about%20me.html

@charset "UTF-8";

*{
    margin: 0px;
    padding: 0px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

#sidebar{
    position: fixed;
    width: 200px;
    height: 100%;
    background: rgba(17,16,17,.80);
    left:-200px;
    transition: all 500ms linear;
}

#sidebar.active {
    left: 0px;
}


#sidebar ul li{
    color: rgba(255,255,255,1.00);
    list-style: none;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(100,100,100,1.00)
}


#sidebar .toggle-btn {
    position: absolute;
    left: 230px;
    top: 20px;
}

#sidebar .toggle-btn span {
    display: block;
    width: 30px;
    height: 5px;
    background: #151719;
    margin: 3px 0px;
}

*{
    margin: 0px;
}


html, body{
    height:100%;
}

.wrapper{
    height: 100%;
    width: 100%;
    background-color: rgba(244,244,244,1.00);
}


.surroundContainer{
    height: 100%;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    position: absolute;
}

.surroundContainer p{
    color:rgba(244,244,244,1.00);
}
.Hpage{
    display: inline-block;
    height: 100%;
    width: 100%;
	
    background-color:rgba(244,244,244,1.00);
}
.pageHome{
    margin: auto;
    height: 100%;
    width: 100%;
    display: inline-block;
    background-color:rgba(244,244,244,1.00) ;
}


#img1{
    float: center;
    margin-left: 20%;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: block;
}
#img2{
    float: right;
    margin-left: auto;
    margin-right: 5%;
    margin-top: 10%;
    margin-bottom: auto;
    display: block;
}

.pageHome{
    margin: auto;
    height: 99%;
    width: 99%;
    display: inline-block;
    background-color:rgba(244,244,244,1.00) ;
}

.textpage{
    margin-top: auto;
    width: 98%;
    height: 98%;
    display: inline-block;
	
    background-color: rgba(245,245,245,1.00);
	
}

#img1{
    float: center;
    margin-left: 20%;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: block;
}
#img2{
    float: right;
    margin-left: auto;
    margin-right: 5%;
    margin-top: 10%;
    margin-bottom: auto;
    display: block;
}

#paragraph{
    word-wrap: break-word;
    padding-left: 10%;
    padding-right: 10%;
    margin-left:auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: auto;
    display: block;
}

.table{
    margin: 0px auto;
    margin-top: 10%;
    margin-bottom: auto;
}



.barpage{
    height: 78%;
    width: 78%;
    overflow: auto;
    white-space: nowrap;
    display: inline-block;
    margin-left: 10%;
    margin-right: 10%;	
}


.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:35px;
	
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    border-radius:3px;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}

.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    width:110px;
    font-weight:bold;
    font-size:13px;
    color:#ffffff;
    background:#6adcfa;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:35px;
    line-height:35px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-bar {
    height:35px;
    width:0px;
    background:#6adcfa;
	
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}

.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:35px;
    line-height:35px;
    color:#ffffff;
    color:rgba(0, 0, 0, 0.4);
}

td{
    table-layout: fixed;
    width: 900px;
    text-align: center;
}
pre {
    white-space: pre-wrap;
	
    text-align: center;
    max-width: 900px;
	
    word-wrap: break-word;
    text-indent: 30px;
    letter-spacing: 1px;
    line-height: 1.6;
    word-spacing: 2px;
}

h2{
    text-decoration: underline;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Jordan Padmore | About page</title>

<meta name="description" content="Hi, I'm Jordan Padmore, a Graphic and Motion Designer who specializes in learning and executing new creative strategies in fastest possible time. From advertising and branding to motion graphics and web design or coding, i have learned it all.">

<meta name="keywords" content="HTML,CSS,XML,JavaScript,Graphic Designer, Graphic Design Portfolio,Padmore,Jordan,Art,Gallery,About,Video,Motion Graphics,Contact,Scangift,Luminart,Ledology,A90sKid,Raincoast Dog Rescue,Basketball,Undertales,Adobe,Photoshop,Illustrator,Indesign,Cinema4D,Dreamweaver,Wordpress,Toronto,Ontario,Canada,Canadian,Artist">

<meta name="Content-Type" content="http://padmorejordan.com/images/5.jpg">

<meta name="twitter:card" value="summary"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta property="og:title" content="Jordan Padmore | Independant Graphic And Motion Designer Portfolio" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.padmorejordan.com/" />
<meta property="og:image" content="http://padmorejordan.com/images/5.jpg" />
<meta property="og:description" content="Hi, I'm Jordan Padmore, a Graphic and Motion Designer who specializes in learning and executing new creative strategies in fastest possible time. From advertising and branding to motion graphics and web design or coding, i have learned it all." /> 




<script>
	function toggleSidebar(){
		document.getElementById("sidebar").classList.toggle('active');
		
		
	}
	
	</script>
<link rel="icon" type="images/png" href="images/jp-logo.png"/>
<link href="AboutMe.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-3.3.1.js"></script>
<script src="scripts/jquery.mousewheel.js"></script>
 
<script>
$(function() {
	$("html, body, *").mousewheel(function(event, delta) {
		this.scrollLeft -= (delta * 80);
		this.scrollRight -= (delta * 80);
		event.preventDefault();
	});
});
</script>
</head>

<body>

<div id="sidebar">
	<div class="toggle-btn" onclick="toggleSidebar()" onmouseover="" style="cursor: pointer;">
		<span></span>
		<span></span>
		<span></span>
		
	</div>
	
	<a href="index.html"><img src="images/gallery/logo-idea-3.png"></a>
	<ul>
		<a href="home page.html"><li>
		Home
		</li></a>
		<a href="Gallery.html"><li>
		Gallery
		</li></a>	
		<a href="Video.html"><li>
		Videos
		</li></a>
		<a href="about.html"><li>
		About	
		</li></a>
		<a href="contact.html"><li>
		Contact	
		</li></a>
		
	</ul>
	
</div>

 <!--wrapper for entire page-->
 	 <div class="wrapper">
 	 	<!--home view portion-->
 	 <!--<div class="view"></div>-->
 	 	<!-- div that will contain horizontal scroll items-->
 	 	<div class="surroundContainer">
 	 		<div class="pageHome">
 	 		  <h4><img id="img2" src="images/block-lettering.png" width="30%">
 	 		    <img id="img1" src="images/me2.png" width="40%">
 	 		    
 	 		    
 		      </h4>
 	 		</div>
 		  <div class="textpage">
 		  		  
 		 <table class="table" style="border: 1px solid rgba(124,124,124,1.00)" >
 		 	
 		 	<tr>
 		 		
 		 		<td>
 		 			
 		 			
 		 			
 <h2>HI, MY NAME IS JORDAN PADMORE</h2>
<pre>
 I am an up and coming force in the field of Graphic Design. Born and raised in Toronto, Ontario, I learned to appreciate art and structure from the media and artwork found throughout the city. I love to create eye-catching graphic designs, whether its 2D art in Photoshop and Illustrator, 3D in Cinema 4D, or motion graphics in After Effects. My specialty from graduating George Brown College is in Advertising design, but have developed other skills in medias and design aspects, such as web design, landscape and interior design, story boarding, photography, and branding. Some of my latest work for clients includes the creation of innovative app ideas, building interactive exciting websites for companies in Italy, and developing title sequences for TV and YouTube web shows. In my free time, you can catch me snowboarding in the mountains, biking through the city, or just fishing all year round, even if I have to break through ice. I'm a hard-working, focused individual who believes being passionate about your work and drive to finish a project is a must have. <a href="contact.html">Contact me</a> to see what I can do to help bring your advertising, branding, and web design needs to life.
 		 	        </pre>
 		 		</td>
 		 	</tr>
 		 	
 		 </table>
 		  
 		  </div>
 		   		  
 		   		  
   		  <div class="barpage">
 		   		  
 		  <div class="Skill bars">
 	 		
 	 		<h1>Working Skills</h1>

<div class="skillbar clearfix " data-percent="100%">
	<div class="skillbar-title" style="background: #3498db;"><span>Photoshop</span></div>
	<div class="skillbar-bar" style="background:rgba(65,159,223,1.00);"></div>
	<div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="90%">
	<div class="skillbar-title" style="background: #e67e22;"><span>Illustrator</span></div>
	<div class="skillbar-bar" style="background:rgba(244,153,73,1.00);"></div>
	<div class="skill-bar-percent">90%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="85%">
	<div class="skillbar-title" style="background:rgba(123,66,199,1.00)"><span>Indesign</span></div>
	<div class="skillbar-bar" style="background:rgba(68,6,96,1.00)"></div>
	<div class="skill-bar-percent">85%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="80%">
	<div class="skillbar-title" style="background:rgba(203,37,73,1.00)"><span>After Effects</span></div>
	<div class="skillbar-bar" style="background:rgba(140,13,41,1.00)"></div>
	<div class="skill-bar-percent">80%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
	<div class="skillbar-title" style="background: #4288d0;"><span>Wordpress</span></div>
	<div class="skillbar-bar" style="background: #124e8c;"></div>
	<div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="60%">
	<div class="skillbar-title" style="background: #27ae60;"><span>HTML CSS</span></div>
	<div class="skillbar-bar" style="background: #2ecc71;"></div>
	<div class="skill-bar-percent">60%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="60%">
	<div class="skillbar-title" style="background: #124e8c;"><span>Cinema 4D</span></div>
	<div class="skillbar-bar" style="background: #4288d0;"></div>
	<div class="skill-bar-percent">60%</div>
</div> 
	 					

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

Answer 1

对于响应式设计，首先在您的 HTML 页面中设置 viewPort 并使用 bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1"> 

在bootstarp中不需要手动定义div的位置和宽度。 BootStap