我的网站在较小的设备上没有响应

【问题标题】：My website is not being responsive on smaller devices我的网站在较小的设备上没有响应
【发布时间】：2020-05-12 03:40:22
【问题描述】：

您好，我一直在做一个新网站，但有一个问题我似乎无法弄清楚。

这是网站网址：https://inspiring-mayer-4c86b6.netlify.com/

我遵循了有关如何使导航栏保持粘性的指南，这样当您滚动时，导航栏会停留在顶部。

它在 PC 和 1920x1080 像素的屏幕上运行良好。我认为使其具有响应性很重要，并且我尝试了几种使其具有响应性的方法，但是当我从 iPhone XS Max 打开网站时，导航栏上的按钮会出现在屏幕之外。

另外，在联系部分，我有一个按钮，其中包含指向联系表的链接。我已经使用 margin-left 将它移到了右边，这在更大的屏幕上是可以的，但是在手机上，这个按钮一直在右边的黑色背景中，在部分边框之外。

/----这是我的 index.html 代码。---/ 

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>    
<title>EFPC | Welcome</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=divice-width, initial-scale=1.0">

    
<!--Style-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--Style-->    

    
    
    
<style>    

    
    body {
        background-color:#0b0c10;
        margin: 0;
        padding: 0;
        font-family:helvetica;
        
    }
    
    img {
     
    }
    
    marquee {

    }
    
    button {
  background-color:#0b0c10;  
  color:white;
  border:none;
  box-shadow: 1px 1px 1px 2px #63c91d;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
 
    }
    
    button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
    
    
    
    .navbar {
        position: fixed;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        background-color:#0b0c10;
        Width:100%**;
        height: 70px;
        z-index: 1;
        border-bottom: 2px solid white;
        border-radius: 20px;
    }
    
    .nav {
        display:flex;
        justify-content: right;
        list-style:none;
        padding-right: 250px;
        
    }
    
    .logo {
        flex:1 1 auto;
        margin-left: 10%;
        text-transform: uppercase;
        text-shadow: 1px 1px 1px 1px ;
        letter-spacing: 1px;
        font-weight: bold;
        font-size:35px;
       text-shadow: -1px -1px 5px rgba(99, 201, 29, 1),   
                    1px -1px 5px rgba(99, 201, 29, 1),
                   -1px 1px 5px rgba(99, 201, 29, 1),
                    1px 1px 5px rgba(99, 201, 29, 1);
        
    }
    
    html {
        scroll-behavior: smooth;
    }
    
	
		a {
    color: #000;
    text-decoration: none;
	text-transform: uppercase;
	margin: 0;
    
    }
    
    
    a:hover{
        color: #000;
    }
    .banner-area {
        position: relative;
        height: 100px;
        
    }
    
    .about-area, .products-area, .service-area, .contact-area {
        position:relative;
        display:flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap:wrap;
        flex-direction: row;
        width: 100%;
        height: 700px;
    }
    .text-part {
        width: 65%;
        height: 80%;
    }
    h1 {
        font-size: 50px;
        font-family: helvetica;
    }
    p{
        font-size: 24px;
        line-height: 50px;
    }

    input {
  background-color:#d4d7de;  
  border:none;
  box-shadow: 1px 1px 1px 2px #596173 ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
  height: 50px;
  width: 85px;
    }
      button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
 
}



/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}    

@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css"; 
    
   
    
</style>



</head>
<body>
     
     <div class="navbar">
       <a class="logo" style="color:white;">EFPC</a>
         
         <ul class="nav">
   
             
     <a href="index.html" class="button"><button class="button" style="height:50px; text-transform: uppercase; width: 85px;  "><span><li><strong>Home</strong></li></span></button></a>
             
     <a href="#about"><button class="button" style="height:50px; text-transform: uppercase; width: 85px;  "><span><li><strong>About</strong></li></span></button></a>
             
     <a href="#products"><button class="button" style="height:50px; text-transform: uppercase; width: 120px;  "><span><li><strong>products</strong></li></span></button></a>
             
    <a href="#services"><button class="button" style="height:50px; text-transform: uppercase; width: 120px; margin-right: 0px; "><span><li><strong>services</strong></li></span></button></a>
             
     <a href="contact.html" style="width: 100px;"><button class="button" style="height:50px; text-transform: uppercase; width: 100px; margin-right: 50px;"><li><span><strong>contact</strong></li></span></button></a>
    
     <a href="#home" style="margin-left: 100px;" class="button"><button class="button" style="height:50px; text-transform: uppercase; width: 85px; "><span><li><strong>Login</strong></li></span></button></a>
             
    <a href="#home" class="button"><button class="button" style="height:50px; text-transform: uppercase; width: 85px; m"><span><li><strong>Sign up</strong></li></span></button></a>              
         
    </ul>
     </div>
    
    <div class="banner-area" id="home"></div>
      <div class="text-part">
        
          <section class="leftpane" style="border:solid; border-radius: 10px; border-color: white; width:75%; height: 100%; float: left;">
              <h1 style="color:white; text-align: center; font-size:40px;  text-shadow:
                    -1px -1px 5px rgba(99, 201, 29, 1),   
                    1px -1px 5px rgba(99, 201, 29, 1),
                   -1px 1px 5px rgba(99, 201, 29, 1),
                    1px 1px 5px rgba(99, 201, 29, 1); " >NEWS</h1>
<!-- Slideshow container -->
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ef5db8e0-d439-47e7-a3df-53e0daaa7e65"></div>
          </section>
    </div>
    <section class="rightpane" style="color:white; float:right; border:solid; border-radius: 10px; width:51%; height: 100%; display:inline-block;"> <h1>Welcome to EFPC!</h1><p> The website is under development , stay tuned for new updates everyday! Best regards,  
        <em><br> ~  The EFPC team ~</em></p></section>
    
        
   
   
    <div class="about-area" id="about"></div>
          <div class="text-part">
         <h1>About Us</h1>
         <p>Welcome to our website, here you can read some information about us.</p>
    </div>


</body>
</html>

/---这是我的 style.css 代码---/

  header {
 
    }
    
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        font-family:helvetica;
        
    }
    
    img {
     
    }
    
    marquee {

    }
    
    button {
  background-color:#d4d7de;  
  border:none;
  box-shadow: 1px 1px 1px 2px #596173 ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
    }
    
    button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
    
    
    
    .navbar {
        position: fixed;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        background-color:#d4d7de;
        Width:100%;
        height: 70px;
        z-index: 1;
    }
    
    .nav {
        display:flex;
        justify-content: right;
        list-style:none;
        padding-right: 250px;
    }
    
    .logo {
        flex:1 1 auto;
        margin-left: 10%;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: bold;
        font-size:35px;
        color:
    }
    
    html {
        scroll-behavior: smooth;
    }
    
	
		a {
    color: #000;
    text-decoration: none;
	text-transform: uppercase;
	margin: 0;
    
    }
    
    
    a:hover{
        color: #000;
    }
    .banner-area {
        position: relative;
        height: 100px;
        
    }
    
    .about-area, .products-area, .service-area, .contact-area {
        position:relative;
        display:flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap:wrap;
        flex-direction: row;
        width: 100%;
        height: 700px;
    }
    .text-part {
        width: 65%;
        height: 80%;
    }
    h1 {
        font-size: 50px;
        font-family: helvetica;
    }
    p{
        font-size: 24px;
        line-height: 50px;
    }

    input {
  background-color:#d4d7de;  
  border:none;
  box-shadow: 1px 1px 1px 2px #596173 ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.5s;
  cursor: pointer;
  height: 50px;
  width: 85px;
    }
      button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

button:hover span {
  padding-right: 25px;
}

button:hover span:after {
  opacity: 1;
  right: 0;
}
  /* Media Section */
  
  @import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css"; 
    
@media screen and (max-width: 600px) {
/* Stylings for all devices with screens with a width of 600px or less.*/
}
@media screen and (max-width: 992px) {
/* all screens with a max width of 992px or less */
}
@media screen and (min-width: 992px) {
/* all screens with a width of 992px or higher */ 
}

`@import url('mainstyles.css');`

任何帮助将不胜感激，谢谢！

【问题讨论】：

  • 没有什么可以让导航栏响应。你刚刚把它粘起来了。
  • 我意识到，我已经尝试了几种不同的方法来使用 @media 查询设置导航栏的样式，但它们似乎都不起作用，所以我删除了它们。 head部分的“”呢？
  • 这不会使网站响应它只是缩小页面以适应屏幕。要使导航栏响应，您必须将内联样式从 &lt;a&gt; 和 &lt;li&gt; 标签移动到 css 并为不同的分辨率定义不同的宽度。文档中也存在 HTML 错误，例如在 &lt;a&gt; 中嵌套 &lt;li&gt; 元素
  • 那么我应该将 标签嵌套在
  • 中吗？
  • 是的 &lt;li&gt; 应该是 &lt;ul&gt; 的直接子代

    • 标签： javascript html css navbar responsive


    【解决方案1】：

    如果您在 google 控制台中检查该站点，您会注意到您已多次设置您的 @ 媒体查询。有些查询是空的，我认为它们的语法不正确，因为 Chrome 抱怨未知的属性名称。 我认为正确的语法应该是 

    @media only screen and (min-width: 600px)...

    如果你检查你的 HTML 头部，你会发现 CSS 样式之后

    <!--Style-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--Style-->

    删除所有媒体查询并过去：

    @media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

    然后用以下标记导航类：

     <ul class col-10 col-s-7 nav>

    以上数值仅供参考。

    您会看到，在调整导航栏的大小时会做出响应。

    请注意，有余量在起作用 - 据我所知 - 因此可能需要进行一些抛光。

    请注意，我的说明是出于调试目的 - 一旦您对结果感到满意，您应该将查询移动到您的 .css 文件中。

    忘了提一下，这可能是一个很好的 read - 也可以查找 Bootstrap 或 Foundation 以获得更好的网站响应能力。

    【讨论】：

    • 我应该在哪里添加“
        ”？我添加了@media 查询。
    • 查看添加的图片。
    • 感谢您的帮助，我会尝试这些步骤并发布结果
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode