Javascript 响应缩放不起作用_Javascript_Html_Css_Responsive Design

Javascript 响应缩放不起作用

javascript html css responsive-design

Javascript 响应缩放不起作用,javascript,html,css,responsive-design,Javascript,Html,Css,Responsive Design,我正在做一个简短的单页网站，上面有一组旋转的pix。不知何故，js脚本和图像破坏了网站的可伸缩性。我不是一个有经验的程序员，所以我有点发疯我很确定这与CSS中的一些固定宽度有关，但是删除它们会带来更多的麻烦。如果有人能帮我们找到原因，我们将不胜感激。这是一个例子 HTML: 谢谢你的帮助。你的固定宽度（1000像素）是罪魁祸首尝试：这是一个 <html> <head> <title></title> <meta charset=

我正在做一个简短的单页网站，上面有一组旋转的pix。不知何故，js脚本和图像破坏了网站的可伸缩性。我不是一个有经验的程序员，所以我有点发疯

我很确定这与CSS中的一些固定宽度有关，但是删除它们会带来更多的麻烦。如果有人能帮我们找到原因，我们将不胜感激。这是一个例子

HTML:

谢谢你的帮助。

你的固定宽度（1000像素）是罪魁祸首

尝试：

这是一个

<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <meta http-equiv="Content-type" content="text/html" ; charset="utf-8" />
  <meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="jvs_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="wrap">
    <div class="maingrid">
      <div class="slides">
        <img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
        <img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
        <img src="http://tests.markgarvey.com/slideshow_images/out3.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out4.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out5.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out6.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out7.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out8.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out9.png">
        <img src="http://tests.markgarvey.com/slideshow_images/out10.png">
      </div>
      <!-- end of slides div -->
      <div class="centertext">
        <img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
        <p class="name">FIRSTNAME LASTNAME</p>
        <p class="address">1234 Example Street<br> Princeton, New Jersey 12345<br> testing@email.net
          <br> 505.422.6563
        </p>
        <p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses
          in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light
          untonsured hair, grained and hued like pale oak.
        </p>
      </div>
      <!-- end of centertext div -->
    </div>
    <!-- end of maingrid div -->
  </div>
  <!-- end of wrap div -->
  <script>
    function nextSlide() {
      var q = function(sel) {
        return document.querySelector(sel);
      }
      q(".slides").appendChild(q(".slides img:first-child"));
    }
    setInterval(nextSlide, 5000)
  </script>
</body>
</html>

#wrap {
  max-width: 100%;
  width: 1000px;
  background: #FFF;
  margin: 0 auto;
}

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  margin-top: 50px;
}

.centertext {
  align-self: center;
  justify-self: center;
  margin-top: 20px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  letter-spacing: normal;
  line-height: 19px;
  padding-bottom: 5px;
  font-family: Verdana, Arial, sans-serif;
  color: #000000;
  font-size: 1em;
  line-height: 20px;
}

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

.name {
  font-size: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
  margin-bottom: 5px;
}

.address {
  margin-top: 8px;
  line-height: 24px;
  font-family: Arial, sans-serif;
  color: #000000;
  font-size: 1em;
  line-height: 19px;
}

/* the slide container with a fixed size */
.slides {
  max-width: 100%;
  width: 1000px;
  height: 670px;
  position: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
  height: auto;
  display: block;
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
  max-width: 100%;
  width: 1000px;
  margin-bottom: 60px;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child {
  z-index: 2;
  /* frontmost */
  opacity: 1;
}

/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
  z-index: 1;
  /* behind current slide */
  opacity: 1;
}

.slides {
  width:100%;
  max-width: 1000px;
  height: 670px;
  position: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
  height: auto;
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width:100%;
  max-width: 1000px;
  margin-bottom:60px;
}