我的网站有一个问题，由于尺寸缩放，它无法在手机上正确显示。我的大部分 svg 大小和字体都到处都是。
我在我的 css 中添加了断点，它可以解决我的大部分主要错误。大多数手机的所有内容都已调整大小并已修复。
<body>
<!--This is the header {logo , menu}-->
<div id="container">
<div id="header">
<div class="logo">
<p>
A n Z
</p>
</div>
<ul class="menu">
<a href="default.html">
<li>Home</li>
</a>
<a class="links" href="Contact.html">
<li>Contact</li>
</a>
<a class="links" href="Projects.html">
<li>Projects</li>
</a>
</ul>
</div>
<div class="content">
<hr>
<h1>
Are you trying to build a professional website ?
</h1>
<P>
Hello, I am a web designer / front end developer. Bringing your vision alive is pivotal to me and that is what sets me apart. Let's create a professional yet astonishing designs for our website that shows your vision.
</P>
<hr>
<h2>My Services</h2>
<hr class="titleUnderline">
<div class="services , separation">
<div class="leftBox , serviceBox">
<img class="serviceLogo" src="web-design.svg">
<h3> Web Design <br/> <span class="subTitle">UI Focused</span></h3>
<p>
Designing a website must be specific to its activity. This is what I do, designing a website professionally to deliver its purpose to the users of the website. User-focused website should be the primary goal of any website.
</p>
</div>
<div class="rightBox , serviceBox">
<img class="serviceLogo" src="responsive-design-symbol.svg">
<h3> Web Development <br/> <span class="subTitle">Responsive and Fast</span></h4>
<p>
Every Website must have to goals to achieve . First it must be resposive which means for it to work on all devices . Second it has to to load as fast as possible to guarantee a very good user experiece.
</p>
</div>
</div>
<div class="services , separation">
<div class="leftBox , serviceBox">
<img class="serviceLogo" src="G designing.svg">
<h3>Logo Designing <br/> <span class="subTitle">Iconic Styles</span></h3>
<p>
A website's logo describes its product, targets the audience and industry. It commonly outlines fundamental information about the business, the desired design, the project timing, and the budget.
</div>
<div class="rightBox , serviceBox">
<img class="serviceLogo" src="htmlcss.svg">
<h3>Front-End Development <br/> <span class="subTitle">HTML / CSS</span></h3>
<p>
Creating a strong foundation for a website means getting the HTML and CSS architecture right. If you've got a design I can create the front-end code for it.
</p>
</div>
</div>
</div>
<br/>
<hr>
<div id="footer">
<div class="copyright">
<p>
©Copyright 2019 AnZ <sup>®</sup>
</p>
<a href="https://www.instagram.com/abuzied365/?hl=en" target="_blank">
<img src="instagram.svg"></a>
<a href="https://www.facebook.com/AbuziedAbdalla" target="_blank">
<img src="facebook.svg">
</a>
<a href="https://twitter.com/AbuzeidAbdalla" target="_blank">
<img src="twitter.svg">
</a>
</div>
</div>
</div>
</div>
</body>
body {
width: 100%;
margin: auto;
color: #7D7B7B;
}
#header {
font-family: 'Yanone Kaffeesatz', sans-serif;
height: 15%;
position: relative;
top: 10px;
text-align: center;
}
h2,
h3,
h4,
h5,
h5 {
font-family: 'Yanone Kaffeesatz', sans-serif;
}
h1 {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 45px;
}
p {
font-family: 'Poiret One', cursive;
font-size: 20px;
font-weight: 650;
}
a:link {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.logo p {
font-family: 'Sacramento', cursive;
font-size: 50px;
outline: 0;
text-rendering: optimizeLegibility;
color: #7D7B7B;
}
ul {
list-style-type: none;
}
#container {
width: 80%;
margin: auto;
}
hr {
border: 1px solid #7D7B7B;
margin-top: 15px;
margin-bottom: 15px;
}
.menu li {
display: inline;
font-size: 20px;
}
.links {
margin-left: 7%;
}
.menu {
padding: 4px;
}
.menu a {
color: #7D7B7B;
}
.serviceBox {
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-right: 10%;
margin-left: 5%;
text-align: center;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
/* .rightBox {
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-left: 10%;
text-align: center;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}*/
h2 {
font-size: 35px;
}
h3 {
font-size: 30px;
}
.services {
width: 100%;
display: flex;
flex-flow: row;
}
.services p,
h3 {
padding: 5px;
line-height: 35px;
}
.subTitle {
font-weight: 100;
font-size: 25px;
}
.titleUnderline {
width: 8%;
float: left;
margin-bottom: 25px;
}
.serviceLogo {
width: 150px;
height: 200px;
}
.separation {
margin-top: 100px;
}
.copyright {
text-align: center;
}
.copyright img {
width: 40px;
height: 40px;
margin-bottom: 50px;
}
.contactMe img {
width: 50px;
height: 50px;
float: left;
margin-right: 30px;
}
.underline {
width: 11%;
float: left;
}
.title {
margin-bottom: 100px;
}
.number,
.myEmail {
font-family: 'Gruppo', cursive;
font-weight: 600;
font-size: 26px;
}
.comingSoon {
font-size: 60px;
text-align: center;
}
@media only screen and (min-width: 320px) and (max-width: 812px) {
.serviceLogo {
width: 75px;
height: 100px;
}
h3 {
font-size: 15px;
}
.subTitle {
font-weight: 100;
font-size: 15px;
}
p {
font-size: 12px;
}
.titleUnderline {
width: 120px;
float: left;
margin-bottom: 25px;
}
/*.rightBox,
.leftBox {
display: none;
}*/
.serviceBox {
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-right: 10%;
margin-left: 5%;
text-align: center;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
.number,
.myEmail {
font-family: 'Gruppo', cursive;
font-weight: 600;
font-size: 15px;
}
.contactLogo {
width: 50px;
height: 80px;
}
.underline {
width: 165px;
float: left;
}
}
很抱歉，我的代码并不是最整洁的，但无论如何，所有浏览器都经过调试并且工作正常，除了我手机上的谷歌浏览器，没有一个错误得到解决。我将不胜感激任何形式的建议或帮助。谢谢
最佳答案
您应该在此处添加代码并调整宽度、字体大小等值...
CSS
@media only screen and max-width(767px){
**********
}
关于jquery - 网站在移动设备上没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57847251/