为什么我的响应网页上有水平滚动条

时间：2017-11-02 20:43:50

标签： css3 responsive-design media-queries

我的网站反应灵敏，所以为什么有水平滚动条？我很困惑！水平滚动条消失需要什么？此外，移动设备上的标题不会缩小为320px标记，即使它在代码编辑器中进行测试时也是如此.... ???

以下是我的CodePen的链接：https://codepen.io/IDCoder/pen/Xevyqq

这是我的HTML代码：

function linkedDrawing(canvas,url){


fetch(url)
  .then((response)=> response.json())
  .then((data)=>{
    const c = canvas.getContext('2d');
    console.log(data.url);
    c.beginPath();
    c.moveTo(data.x1, data.y1);
    c.lineTo(data.x2, data.y2);
    c.strokeStyle = data.col;
    c.stroke();
    //added this if to continue as long as we have value for URL. And recursively call the drawing function
    if(data.url) {
        linkedDrawing(canvas, data.url);
     }
  })
}

linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

这是我的CSS代码：

<html>
  <title></title>
  <head><meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
    <div class="Main">
        <div class="Header Box">
          <div id="One"> 
            <img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" width="1000" height="166"/>
          </div>      
        </div>

        <div class = "Second Row">
          <div class="About Us">
          <h1>Technology you can trust</h1>

  <p>Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BB​B (Better Business Bureau) with an A+ rating.</p>

  <p>Ethersonic specializes in Computer  diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair</p>
        </div>
        <div class="BBB VOSB">
          <img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" width="200" height="124"/>
        </div>
      </div>
        <div class="Third Row">
          <div id="Computers">
        <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" width="300" height="203"/>
            <p>
              Desktop and Laptop Repair
            </p>
          </div>
          <div id="Security">
          <img src="https://s1.postimg.org/8j0ejlsp7j/Security_Cameras.jpg
" width="300" height="201"/>
            <p>
             Security Camera Systems | <br>
Access Controls Systems |
Intercom Systems 
            </p>
          </div>
          <div id="Networking">
          <img src="https://s1.postimg.org/7ymhfqjm3z/Networking_2.jpg" width="300" height="220"/>
            <p>
             Network Installation |
Low Voltage Cabling 
            </p>
          </div>
      </div>
      <div class="Fourth Row">
        <div class="container">
          <div id="slider">
      <figure>
 <img src="https://s1.postimg.org/7uayt1hjf3/378c87079dddbfe1d78c9f892695626fl-m0xd-w1020_h770_q80.jpg"/>
<img src="https://s1.postimg.org/11px6krrfz/extralarge.jpg"/>
<img src="https://s1.postimg.org/6yehdl959r/gen_Mid.09186160_1.jpg"/>
<img src="https://s1.postimg.org/8tr267l5fz/ISaly9e2xn0r8r1000000000.jpg"/>
<img src="https://s1.postimg.org/11px6krz5r/ISinl3p5sts48e1000000000_1.jpg"/>
</figure>        
      </div>
        </div>
        <div>
      <div class ="Slideshow Description">
        <p>
          We are Installation Experts! <br>
Offering Customized Installation for Both Residentials and Commercial Properties
        </p>
      </div>
    </div>
   </div>
      <div class="Footer">
         <div>
 © Ethersonic Technologies LLC. All rights reserved.
        </div
   </div>
  </body>
</html>

1 个答案:

答案 0 :(得分：1)

你有两个问题导致了这个问题。

第一个问题是specificity之一。您的图像中有很多硬编码widths（例如<img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" width="1000" height="166" />）。这是1000px的硬编码宽度;远不止320px的媒体查询可以处理。相反，我建议使用基于百分比的宽度，例如100%。

另请注意，虽然媒体查询确实会增加比常规CSS选择器更高的特异性（并因此覆盖它），但像这样的内联 width属性需要尽可能高的级别特异性。

您可以通过在媒体查询!important声明中添加width来覆盖此问题，但我强烈建议您删除图片中的固定宽度，以及使用新的CSS选择器来定位图像。

第二个问题是margin上的硬编码.Main属性，左边增加75px，右边增加125px。当然，这可能适用于大屏幕，但在总共只有320px的设备上，你渲染几乎三分之二的宽度基本上没用。您应该显着降低这些边距，或者使用 percentage-based values ，以便他们适应。

另请注意，320px 远对于标准移动媒体查询来说太小了;几乎所有你打过的手机都是老黑莓。我强烈建议您查看标准设备的 a list of media queries 的CSS技巧。大多数平板电脑的标准为768px，大多数手机的标准为576px。

这是一个更新的代码段，其中删除了所有硬编码的width和height属性，并添加了一个简单的img声明，以确保它们不会被删除; t逃避父母的界限：

img {
  max-width: 100%;
  width: 100%;
}

＆＃13;
＆＃13; 
img {
  max-width: 100%;
  width: 100%;
}

.Main {
  display: grid;
  grid-template-columns: 1/1r;
  /*background-color: green;*/
  margin: 5px 125px 0 75px;
  grid-gap: 25px;
}

.Header.Box {
  display: grid;
  grid-template-columns: 100%;
  /*background-color: red;*/
  grid-gap: 15px;
}

.About.Us {
  font-size: 15px
}

.BBB.VOSB {
  text-align: right;
  padding-right: 10px;
}

#One,
#Two,
#Three {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.Second.Row {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 15px;
}

.Third.Row {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 15px;
  /*background-color: green;*/
}

#Computers,
#Security,
#Networking {
  /*border-style: solid;*/
  border-color: black;
  border-width: 1px;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
}

.Fourth.Row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 25px;
  /*background-color: blue;*/
}

.container {
  max-width: 500px;
  /*background-color: blue;*/
}

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

.Slideshow.Description {
  font-size: 1.25em;
}

.Footer {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 25px;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
  font-size: 17px;
  /*background-color: yellow;*/
}

@media (min-width: 500px) {
  .Header.Box {
    display: grid;
    grid-template-columns: 1fr;
  }
}

#One img {
  width: 100%;
  height: auto;
}

@media (min-width: 500px) {
  .Second.Row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 320px) {
  h1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: h2;
  }
}

@media (max-width: 320px) {
  #One img {
    display: grid;
    grid-template-columns: 1fr;
    width: 200px;
    height: auto;
  }
}

@media (min-width: 500px) {
  .Third.Row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 500px) {
  .Fourth.Row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
＆＃13; 
<html>
<title></title>

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

<body>
  <div class="Main">
    <div class="Header Box">
      <div id="One">
        <img src="https://s1.postimg.org/5ape0obb0f/Ethersonic_Header_Test_a.jpg" />
      </div>
    </div>

    <div class="Second Row">
      <div class="About Us">
        <h1>Technology you can trust</h1>

        <p>Ethersonic Technologies has been servicing Chicago and the surrounding suburbs since April 2008. We are a Certified (VOSB) Veteran Owned Small Business with the Federal Government and a member of the BB​B (Better Business Bureau) with an A+ rating.</p>

        <p>Ethersonic specializes in Computer diagnosis and repair, Security Camera Installation and repair and Network Installation and Repair</p>
      </div>
      <div class="BBB VOSB">
        <img src="https://s1.postimg.org/284vrnvfsv/BBB_and_VOSB_Logos.jpg" />
      </div>
    </div>
    <div class="Third Row">
      <div id="Computers">
        <img src="https://s1.postimg.org/1dv3jss5yn/asus-reveals-the-rog-g11-gaming-desktop-491165-2.jpg" />
        <p>
          Desktop and Laptop Repair
        </p>
      </div>
      <div id="Security">
        <img src="https://s1.postimg.org/8j0ejlsp7j/Security_Cameras.jpg
" />
        <p>
          Security Camera Systems | <br> Access Controls Systems | Intercom Systems
        </p>
      </div>
      <div id="Networking">
        <img src="https://s1.postimg.org/7ymhfqjm3z/Networking_2.jpg" />
        <p>
          Network Installation | Low Voltage Cabling
        </p>
      </div>
    </div>
    <div class="Fourth Row">
      <div class="container">
        <div id="slider">
          <figure>
            <img src="https://s1.postimg.org/7uayt1hjf3/378c87079dddbfe1d78c9f892695626fl-m0xd-w1020_h770_q80.jpg" />
            <img src="https://s1.postimg.org/11px6krrfz/extralarge.jpg" />
            <img src="https://s1.postimg.org/6yehdl959r/gen_Mid.09186160_1.jpg" />
            <img src="https://s1.postimg.org/8tr267l5fz/ISaly9e2xn0r8r1000000000.jpg" />
            <img src="https://s1.postimg.org/11px6krz5r/ISinl3p5sts48e1000000000_1.jpg" />
          </figure>
        </div>
      </div>
      <div>
        <div class="Slideshow Description">
          <p>
            We are Installation Experts! <br> Offering Customized Installation for Both Residentials and Commercial Properties
          </p>
        </div>
      </div>
    </div>
    <div class="Footer">
      <div>
        © Ethersonic Technologies LLC. All rights reserved.
      </div>
    </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！ ：）

相关问题
最新问题