您好，有人可以帮助我如何使我的网站解析度做出响应吗？

时间：2019-05-24 16:56:59

标签： javascript jquery html css

所以我是Web开发的新手，我的网站有一个大问题，它的响应速度不佳，我的网站仅在FULLHD分辨率下看起来不错，有人可以帮助我如何使我的网站响应任何分辨率？ 我会给你我的网站的完整代码， 该网站将看起来很奇怪，因为缺少css，js文件和图像，但是现在的设计已不再重要，现在我只需要解决响应问题。 等待某人的帮助！

HTML：


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">   

    <meta charset="UTF-8">
    <title>PC Service Sinko</title>

    <style>



body {

    font-family: 'Roboto Condensed', sans-serif;  
    font-size: 16px;
    overflow: auto;
    text-transform: uppercase;
    font-weight: bold;
}
.menu {
  height: 70px;
  width: 70px;
  left: 70px;
  top: 20px;
  text-align: center;
  position: absolute;
  background: #0e0f0f;
  overflow: hidden;
  transition: all 0.2s ease;
  z-index: 999;
}
.menu.active {
  width:85%;
  transition:width 0.3s;
   -webkit-transition:width .3s;
   -moz-transition: width 0.3s;

}
.menu.active .menuContent * {
  opacity: 1;
}
.menu.active span i:nth-child(1) {
  transform: rotate(-45deg) translate(-50%, -50%);
  top: 50%;
}
.menu.active span i:nth-child(2) {
  transform: translateX(-100px);
  opacity: 0;
}
.menu.active span i:nth-child(3) {
  transform: rotate(45deg) translate(-50%, -50%);
  top: 50%;
}
.menu span {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 0px;
  cursor: pointer;
  background: #0e0f0f;
  opacity: 0.3;
  z-index: 1;
}
.menu span i {
  position: absolute;
  transform-origin: 50% 50%;
  width: 45%;
  height: 2px;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #ccc;
  transition: transform 0.3s ease, opacity 0.1s ease 0.1s;
}
.menu span i:nth-child(1) {
  top: 40%;
}
.menu span i:nth-child(2) {
  top: 50%;
}
.menu span i:nth-child(3) {
  top: 60%;
}
.menu .menuContent {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 40px;
  right: 0px;
  text-align: center;
}
.menu .menuContent * {
  opacity: 0;
}
.menu .menuContent ul li {
  display: inline-block;
  margin-left: 140px;
  margin-right: 50px;
  color: #2d3235;
  transition: opacity 0.3s ease 0.3s;
  cursor: pointer;
  position: relative;
}
.menu .menuContent ul li:hover:before {
  opacity: 0.8;
  top: 13px;
  left: 20px;
}
.menu .menuContent ul li:hover:after {
  opacity: 0.8;
  bottom: 13px;
  left: -20px;
}




body {
margin: 0;
padding: 0;
background-color: #112b38;
}

ul
{
display: inline;
margin-bottom: 500px;
}
ul li
{

margin: 12px 100px;
transition: 0.5s;
}
ul li a 
{
display: block;
position: relative;
text-decoration: none;
padding: 0px;
font-size: 18px;
font-family: sans-serif;
color: #fff;
text-transform: uppercase;
transition: 0.5s;
}
ul:hover li a
{

transform: scale(1.5);
opacity: .2;
filter:blur(5px);
}
ul {
font-size: 0;
}
ul li {
    display: inline;
    font-size: 16px;
}

ul li a:hover
{

transform: scale(2);
opacity: 1;
filter:blur(0);
}
ul li a:before
{

content: '';
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
transition: 0.5s;
background:#43bc0b;
transform-origin:right;
transform: scaleX(0);
z-index: -1;
}
ul li a:hover:before
{
transition: 0.5s;
transform-origin: left;
transform: scaleX(1);
}
a, a:hover, a:focus {
    text-decoration: none;
    color: white;
}
body {
background-color: #112b38;

}
body {
    width: 100wh;
    height: 90vh;
    color: #fff;
    background-image: linear-gradient(60deg, rgb(61, 51, 147) 0%, rgb(43, 118, 185) 37%, rgb(44, 172, 209) 65%, rgb(53, 235, 147) 100%);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
body
{
   overflow-x: hidden;

}




   </style>
</head>
<body>


    <div class='menu'>
  <span class='toggle'>
    <i></i>
    <i></i>
    <i></i>
  </span>
  <div class='menuContent'>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="szolgaltatasok.html">Services</a></li>
      <li><a href="rolunk.html">About us</a></li>
      <li><a href="elerhetoseg.html">Contact</a></li>
      <li><a href="csapat.html">Team</a></li>
    </ul>
  </div>
</div>



<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>


  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="Laptopondesktop.jpg" style="height:797px;"   alt="First slide">
      <div class="carousel-caption">
      <h2 id="fadeuptext" class='animated fadeInUp' style="animation-delay: 1s">Cheap service?</h2>
      <h2 id="fadelefttext" class='animated fadeInLeft' style="animation-delay: 2s">Here you can find</h2>

      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="bestvga.jpg" style="height:797px;"   alt="Second slide">
      <div class="carousel-caption">
      <h2 id="fadeuptext2" class='animated fadeInUp' style="animation-delay: 1s">Do you want better pc?</h2>
      <h2 id="fadelefttext2" class='animated fadeInLeft' style="animation-delay: 2s">We can give you for the best price!</h2>

      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="brokenphone.jpg" style="height:797px;"   alt="Third slide">
      <div class="carousel-caption">
      <h2 id="fadeuptext2" class='animated fadeInUp' style="animation-delay: 1s">Broke your phone</h2>
      <h2 id="fadelefttext2" class='animated fadeInLeft' style="animation-delay: 2s">We will fix it!!!</h2>

      </div>

    </div>
  </div>


  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<div class="rectangle"><h1 style="border-color:#72b746; letter-spacing:2px;">Our partners:</h1></div>
<div class="block">ASD</div>
<div class="block2">ASD</div>


<div class="photo-container">
<img class="acer" width="250" height="141" alt="Acer" src="https://pcmentor.hu/wp-content/uploads/2017/03/acer.png" srcset="https://pcmentor.hu/wp-content/uploads/2017/03/acer.png 250w" sizes="(max-width:250px) 100vw, 250px" data-wpfc-original-srcset="https://pcmentor.hu/wp-content/uploads/2017/03/acer.png 250w" align="middle" style="position:absolute;">
<img class="asus" width="250" height="141" alt="Asus" src="https://pcmentor.hu/wp-content/uploads/2017/03/asus.png" srcset="https://pcmentor.hu/wp-content/uploads/2017/03/asus.png 250w" sizes="(max-width:250px) 100vw, 250px" data-wpfc-original-srcset="https://pcmentor.hu/wp-content/uploads/2017/03/asus.png 250w" align="middle" style="position:absolute">
<img class="dell" width="250" height="141" alt="Dell" src="https://pcmentor.hu/wp-content/uploads/2017/03/dell.png" srcset="https://pcmentor.hu/wp-content/uploads/2017/03/dell.png 250w" sizes="(max-width:250px) 100vw, 250px" data-wpfc-original-srcset="https://pcmentor.hu/wp-content/uploads/2017/03/dell.png 250w" align="middle" style="position:absolute">
<img class="msi" width="250" height="141" alt="MSI" src="https://pcmentor.hu/wp-content/uploads/2017/03/msi.png" srcset="https://pcmentor.hu/wp-content/uploads/2017/03/msi.png 250w" sizes="(max-width:250px) 100vw, 250px" data-wpfc-original-srcset="https://pcmentor.hu/wp-content/uploads/2017/03/msi.png 250w" align="middle" style="position:absolute">
<img class="lenovo" width="250" height="141" alt="Lenovo" src="https://pcmentor.hu/wp-content/uploads/2017/03/lenovo.png" srcset="https://pcmentor.hu/wp-content/uploads/2017/03/lenovo.png 250w" sizes="(max-width:250px) 100vw, 250px" data-wpfc-original-srcset="https://pcmentor.hu/wp-content/uploads/2017/03/lenovo.png 250w" align="middle" style="position:absolute">
<img class="apple" width="250" height="141" alt="Apple" src="images/apple3.png" srcset="images/apple3.png 250w" sizes="(max-width:250px) 100vw, 250px" data-wpfc-original-srcset="images/apple3.png 250w" align="middle" style="position:absolute">
</div>
<div class="rectangle2"><h1 style="border-color:#72b746; letter-spacing:2px;">Why choose us?</h1></div>
<i class="fa fa-globe fa-5x" aria-hidden="true"></i>
<i class="fa fa-laptop fa-5x " aria-hidden="true"></i>
<i class="fa fa-mobile fa-2x" aria-hidden="true"></i>
<i class="fa fa-wrench fa-5x" aria-hidden="true"></i>
<i class="fa fa-trophy fa-5x" aria-hidden="true"></i>
<i class="fa fa-money fa-5x"  aria-hidden="true"></i>
<i class="fa fa-smile-o fa-5x" aria-hidden="true"></i>






<span class="font-style" style="font-size: 28px;"><span style="font-weight: bold;"><span style="color: rgb(115, 184, 70);"></span><br></span></span>
<span class="font-style2" style="font-size: 28px;"><span style="font-weight: bold;"><span style="color: rgb(115, 184, 70);"></span><br></span></span>
<span class="font-style3" style="font-size: 28px;"><span style="font-weight: bold;"><span style="color: rgb(115, 184, 70);"></span><br></span></span>
<span class="font-style4" style="font-size: 28px;"><span style="font-weight: bold;"><span style="color: rgb(115, 184, 70);"></span><br></span></span>
<span class="font-style5" style="font-size: 28px;"><span style="font-weight: bold;"><span style="color: rgb(115, 184, 70);"></span><br></span></span>
<span class="font-style6" style="font-size: 28px;"><span style="font-weight: bold;"><span style="color: rgb(115, 184, 70);"></span><br></span></span>


<div class="footerblock">A</div>

<div class="contact-text"><h1>Call us!</h1></div>

<form class="contact-form" action="" method="post">

  <input type="text" class="contact-form-text" placeholder="Teljes Név..." name="name" required>

  <input type="email" class="contact-form-text" placeholder="Email cím..." name="email" required>

  <textarea placeholder="Üzenet..." class="contact-form-msg" name="message" required></textarea>


  <input id="kuldes" class="contact-form-button" type="submit" value="Küldés!">

</form>

<!-->KONTANT FORMA<!-->










<link rel="stylesheet" href="style2.css"> 


<script
  src="https://code.jquery.com/jquery-3.3.1.js"
   ></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/jquery.min.js"></script>

<script>
    $('.toggle').on('click', function() {
    $('.menu').toggleClass('active');
});

$(window).on("load", function(){
$('.menu').toggleClass('active');

});
$("#kuldes").click(function(){
  alert("Message sent");
});   
</script>


</body>
<footer>



<div class="block3">ASD</div>










<div class="full-footer">

<div class="blockfooter"><p></p></div>

<div class="socialmedia">
<ul>
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer"><li><i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i></li></a>
<a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer"><li><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></li>
<a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer"><li><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li>

</ul>

</div>

<div class="beogradiuzlet"><a href="beograd.html"><i class="fa fa-home fa-5x" aria-hidden="true"></i></div>

</div>

</footer>
</html>

CSS：

.contact-form
{
position:absolute;
z-index:1000;
top:3400px;
left:30px;
}
.contact-form-text
{
  display:block;
  background-color:#111;
  padding:30px;
  font-size:17px;
  margin:70px;
  width:600px;

  border-radius:10px;
  font-weight:bold;
  color:white;
  transition:0.5s ease-in-out;
}
.contact-form-button
{
  position:absolute;
  left:200px;
  background-color:#34495e;
  border:0;
  border-radius:20px;
  padding:17px 100px;
  cursor:pointer;
  font-size:28px;
  font-weight:bold;
  color:white;
  transition:0.5s ease-in-out;

}
.contact-form-button:hover
{
  background-color:#2980b9;

}
.contact-form-text:hover
{
  box-shadow: 0 0 10px 4px #34495e
}
.contact-form-msg:hover
{
  box-shadow: 0 0 10px 4px #34495e
}
.contact-form-msg
{
    display:block;
  background-color:#111;
  padding:30px;
  font-size:17px;
  margin:70px;
  width:600px;
  height:150px;
  border-radius:10px;
  font-weight:bold;
  color:white;
  transition:0.5s ease-in-out;
}
.carousel {
    margin: auto;
    width: 75%;
    right: 50px;
    top: 110px;
    border-style: solid;
    border-width: 5px;
    border-color: black;
    justify-content: center;
}
.carousel-indicators li
{
    height: 20px;
    background-color:white;
}
.carousel-control-next, .carousel-control-prev {


}


.rectangle {
  position:relative;
  height: 50px;
  width: 100px;
  background-color: white;
  top:150px;
  height:300px;
  width:100%;
}
.rectangle h1
{
    text-align:center;
    color: black;
    font-size: 36px;
    font-family: sans-serif;
    font-weight: bold;
}
.block
{
  position:relative;
  width: 100px;
  z-index: 99;
  background-color: #72b746;
  height:10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
  bottom: 100px;



}
.asus
{
    position:relative;
    left:200px;
    bottom:-225px;
}
.dell
{
    position:relative;
    left:450px;
    bottom:-225px;


}
.msi
{
    position:relative;
    left:700px;
    bottom:-225px;
}
.acer
{
    position:relative;
    left:950px;
    bottom:-225px;


}
.lenovo
{
    position:relative;
    left:1200px;
    bottom:-225px;


}
.apple
{
    position:relative;
    left:1450px;
    bottom:-245px;



}
.rectangle2
{
  position:relative;
  height: 50px;
  width: 100px;
  background-color: black;
  height: 1400px;
  bottom: -400px;
  width:100%;





}
 .rectangle2 h1
{
    position:relative;
    text-align:center;
    color: white;
    font-size: 36px;
    font-family: sans-serif;
    font-weight: bold;
    bottom: -100px;
} 
.block2
{
   position:relative;
  width: 100px;
  z-index: 100;
  background-color: #72b746;
  height:10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0;
  bottom: -580px;



}
.fa-globe
{
    position:absolute;
    color: white;
    z-index:99999;
    background: #72b746;
    padding: 15px;
    border-radius: 50%;
    left:440px;
    bottom: -970px;
}
.tavkommunikacio h1
{
    position:relative;
    text-align:center;
    color: green;
    font-size: 36px;
    font-weight: bold;
    bottom: 90px;
    right: 400px;




}
.fa-laptop
{
    position:relative;
    color: white;
    z-index:999;
    background: #72b746;
    padding: 15px;
    border-radius: 50%;
    bottom: 697px;
    left:1415px;

}
.fa-mobile
{
    position:relative;
    color: white;
    left:1345px;
    bottom: 720px;
    z-index:1000;



}
.font-style
{
    position: absolute;
    color: white;
    bottom: -1080px;
}
.font-style2
{
    position: absolute;
    color: white;
    left:1300px;
    bottom: -1120px;



}
.fa-wrench
{
    position:relative;
    color: white;
    z-index:99999;
    background: #72b746;
    padding: 15px;
    border-radius: 50%;
    left:298px;
    bottom: 310px;

}
.font-style3
{
    position: absolute;
    color: white;
    bottom: -1460px;



}
.fa-trophy
{
    position:relative;
    color: white;
    z-index: 1002;
    background: #72b746;
    padding: 15px;
    border-radius: 50%;
    bottom: 310px;
    left:1167px;


}
.fa-money
{
    position:absolute;
    color: white;
    z-index: 1003;
    background: #72b746;
    padding: 15px;
    border-radius: 50%;
    bottom: -1768px;
    left:1411px;



}
.fa-smile-o
{
    position:absolute;
    color: white;
    z-index: 1004;
    background: #72b746;
    padding: 15px;
    border-radius: 50%;
    bottom: -1768px;
    left:437px;


}

.font-style4
{
    position: absolute;
    color: white;
    bottom: -1460px;
    left:1360px;    
}
.font-style5
{
    position: absolute;
    color: white;
    bottom: -1870px;
    left:333px;
    text-align:center;

}
.font-style6
{
    position: absolute;
    color: white;
    bottom: -1870px;
    left:1360px;
    text-align:center;

}
.block3
{
  position:relative;
  width: 900px;
  z-index: 100;
  background-color: #72b746;
  height:295px;
  font-size: 0;
  bottom: -290px;
  background: url(contactus2.jpg)



}
.blockfooter
{
    position:relative;
    z-index: ;
    background-color: #898989;
    font-size:20px;
    height:125px;
    bottom: -1279px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    color:white;
}
.blockfooter p
{
    text-align:center;
    padding:30px;


}

.socialmedia li
{
    list-style: none;
    margin: 0px 5px;
    display: inline-block;
    color: #fff;
    font-size: 16px;
    padding: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    transition: .5s;
}


.socialmedia
{
    position: absolute;
    top: 4345px;
    left: 1630px;
    z-index: 1004;  
    transform: translate(-53%,-50%);
}
.socialmedia li:hover
{
    cursor: pointer;
    color: #292929;
    border: 2px solid #292929;
    transition: .5s;



}
.mapouter
{
    overflow:hidden;
    z-index:999;
    position:absolute;
    left:1200px;




}
.footerblock
{

    position:absolute;
    background-color: white;
    z-index:-1;
    font-size:0px;
    height:825px;
    width:900px;
    bottom: -3159px;
    color:white;



}
}
.contact-form
{
position:absolute;
z-index:10000;
}
.carousel-caption h2
{
    color:black;
    font-weight:bold;


}
.carousel-caption
{
    position:absolute;
    left:300px;
    top:500px;


}
#fadeuptext
{
    color:white;
    font-size:60px;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
#fadelefttext
{
    color:#6ab04c;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
#fadeuptext2
{
    color:white;
    font-size:60px;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
#fadelefttext2
{

    color:#6ab04c;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
.carousel-control-prev-icon:nth-child(2) {
    filter: invert(0%);
}
.fa-home 
{
    position: absolute;
    top: 4345px;
    left: 122px;
    z-index: 1005;  
    transform: translate(-53%,-50%);
    color: #fff;
    font-size: 34px;
    padding: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    transition: .5s;

}

.fa-home:hover
{
    cursor: pointer;
    color: #292929;
    border: 2px solid #292929;
    transition: .5s;

}

3 个答案:

答案 0 :(得分：0)

您需要考虑使用media queries或现有的CSS框架，例如Bulma或Bootstrap。媒体查询实际上非常易于使用，只需花一点时间进行修补和测试。不过，这是成为开发人员的一部分。

答案 1 :(得分：0)

您可以使用媒体查询在不同的显示尺寸上设置特定的CSS更改。

签出此页面：Media Query

这是他们在页面上提供的示例：

    @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这意味着当窗口的宽度小于600px时，主体的背景颜色将变为浅蓝色。

答案 2 :(得分：0)

此处的关键字实际上是“响应式”的，因为这是前端设计人员在能够适应不同屏幕尺寸时称为其页面的名称。您需要结合两件事：

1。 HTML响应式元标记

将此代码放在html的<head></head>中。没有它，无论您使用多少媒体查询，您的CSS都将无法正常工作。

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

2。 CSS媒体查询

您将这些包含在CSS代码中，以告诉页面浏览器更改大小时的行为。例如，您将在此处告诉您的代码它需要将导航栏放到汉堡菜单中，因为它不再可以水平放置在页面顶部。它们具有许多选项，包括屏幕类型，最小/最大宽度设置，甚至打印检测。调整浏览器窗口的大小（或将其初始化为特定大小，例如在小型电话上）后，页面将自动适应您在这些媒体查询中告诉您的所有CSS。

@media (max-width: 500px) {
   /* css rules go here for browser windows that are 500px width and below */
}

这里是一个很好的链接，可让您更多地了解它们（但是简单的Google搜索将提供很多教育材料）：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

相关问题
最新问题