时间戳

首页 > 解决方案 > 我的网站没有响应媒体查询

html - 我的网站没有响应媒体查询

问题描述

我是 Web 开发的新手，我已经建立了一个 3 页的小网站。我的目标是使用@media 标签使其响应以下内容：max-widths 980px:768px和640px. 我做了第一页，它的行为很奇怪。如何使整个网站响应？请协助。我的所有 3 页和媒体的代码已附上。谢谢。

/*first page */
     <head>
        	<title>AboutMe</title>
        	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
        	<meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>	
        	<div class="container">
        			<div class="top">
        				<div class="myname">
        					<h4 class="firstlast">name</h4>
        				</div>
        				<div class="list">
        					<ul>
        						<li class="contact"><a href="contact.html">Contact</a></li>
        						<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
        						<li class="about">About</li>
        					</ul>
        				</div>
        			</div>
        
        			<div class="middle-about-me"> 
        				<div class="center">
        					<h3>&emsp;About Me</h3>
        					<hr>
        					<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
        						<img src="assets/img/author.jpg" width="150px" height="150px"><br>
        						&thinsp;&thinsp;To briefly introduce the... to you I would say it is a country located on the........>
        						&thinsp;&thinsp;&thinsp;&thinsp;shares the same borders with ....... It is the world largest<br> 
        						&emsp;producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> &emsp;real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> &emsp;&emsp;"Impossible is nothing",  Muhammad Ali.</p>
              <p class="smile"><i>hover on my picture and start smiling</i></p>
        				</div>
        			</div>
        			<div class="footer">
        				<p class="footer-copyright">Copyrigtht &copy; 2019 Portfolio "name" All rights reserved.</p>
        		
        			</div>
        	</div>
        
        </body>
    
    
    
        /*second page */
        <body>	
        	<div class="container">
        			<div class="top">
        				<div class="myname">
        					<h4 class="firstlast">name</h4>
        				</div>
        				<div class="list">
        					<ul>
        						<li><a href="contact.html">Contact</a></li>
        						<li>Portfolio</li>
        						<li><a href="index.html">About Me</a></li>
        					</ul>
        				</div>		
        			</div>
        
        			<div class="middle">
        				<div class="center-portfolio">
        					<h3>&emsp;Portfolio</h3>
        					<hr>
        					<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
        					<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
        					<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
        					<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
        					<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
        					<div class="div6"><p><i>please to hover on the images</i></p></div>
        					<div class="banner1">career picture 1</div>
        					<div class="banner2">chocolate tour</div>
        					<div class="zoomIn banner5">Abidjan</div>
        					<div class="banner4">career picture 2</div>
        					<div class="banner3">Guild Brussels</div>
        				</div>
        			</div>
        			<div class="footer">
        				<p class="footer-copyright"> Copyrigtht &copy; 2019 Portfolio "name" All rights reserved.</p>
        			</div>
        	</div>
        
        </body>
        
        
        /*third page */
        <body>	
        	<div class="container">
        			<div class="top">
        				<div class="myname">
        					<h4 class="firstlast">name</h4>
        				</div>
        				<div class="list">
        					<ul>
        						<li>Contact</li>
        						<li><a href="portfolio.html">Portfolio</a></li>
        						<li><a href="index.html">About Me</a></li>
        					</ul>
        				</div>
        			</div>
        
        			<div class="middle">
        				<div class="center">
        					<h3>&emsp;Contact</h3>
        					<hr>
        						<form>
        							&emsp;&thinsp;Name:<br>
        							<input id="namebox" type="text" name="name" required="" placeholder="your name">
        							<br><br>
        							&emsp;&thinsp;Email:<br>
        							<input id="emailbox" type="Email" name="email" required="" placeholder="example@yahoo.com">
        							<br><br>
        							&emsp;&thinsp;Message:<br>
        							<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
        							</textarea>
        							<br><br>
        							&emsp;&thinsp;<input type="submit" value="submit" name="submit">
        						</form>
        						<br>
        				</div>
        			</div>
        			<div class="footer">
        				<p class="footer-copyright">
        					Copyrigtht &copy; 2019 Portfolio "name" All rights reserved.
        				</p>
        			</div>
        	</div>
        
        </body>
    
    
    
    /* Width at 768px and below */
    @media screen and (max-width: 768px) {
    
      body {
    		background-color : #E9967A;
      }
    
      .container {
      	background-color: green;
      	border-style: none;
        width: 50%;
      }
    
     .middle-about-me,
     .footer, .top{
      	width: 50%;
      }
    
      .middle-about-me{
        width: 50%%;
      }
    }
    
     /*Width at 640px and below */
    @media screen and (max-width: 640px) {
    
      body {
    		background-color : #E9967A;
      }
    
      .container {
      	background-color: green;
      	border-style: none;
        width: 50%;
      }
    
     .middle-about-me,
     .footer, .top{
      	width: 50%;
      }
    
      .middle-about-me{
        width: 50%%;
      }
    
    }

标签： htmlcssmedia-queries

解决方案

我希望你有一个最终产品的草图，它会很有帮助。使页面具有响应性不仅仅是编写有效的 HTML 标记和相应的样式并记住拼写错误，因为从您的代码中，额外的%符号会产生

  .middle-about-me{
   width: 50%%;
  }

行为不端。您需要了解几件事才能使页面响应有效并且非常接近您想要的。normalize.css首先，您应该考虑通过使用或利用在现代浏览器中几乎一样好的通用选择器的功能来重置浏览器自然应用于有效 HTML 标记的默认样式，例如：

*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}

html{
font-size: 62.5% /* (10/16) * 100%  and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}

body{
box-sizing: border-box;
}

img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}

因此，通过基本重置，您始终可以在感觉合适时依赖使用ems 或s 字体以及图像和其他块元素的百分比。rem这篇小文章不足以教会你所有你需要知道的关于网络响应能力的知识，但我希望它能为你的道路指明方向。同时，那些不是我最初的想法，我参加了“Jonas Schmedtman”的课程，他实际上认为我是那些。如果你有最后一页应该是什么样子的草图，或者你仍然不太清楚我到目前为止试图解释的内容，请不要犹豫，添加评论，以便我们一起整理。

推荐阅读