html - 没有 Bootstrap 的响应式设计

Question

我尝试构建的网站存在一些设计问题，我无法让它响应不同的屏幕分辨率。

html,
body {
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
}

.menubar {
  position: absolute;
  z-index: 150;
}

#logo {
  width: 550px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 40%;
}

.menubar ul,
li,
a {
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 10px;
  z-index: 1000;
}

.menubar a:hover {
  text-decoration: underline;
}

.menubar.two a {
  color: black;
}

.slider-contain {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.a-slide {
  background-size: cover !important;
}

.slick-slider {
  height: 100%;
  width: 100%;
  z-index: -1;
}

.slick-list,
.slick-track {
  height: 100%;
}

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
}

.overlay p {
  color: white;
  position: absolute;
  font-size: 30px;
  width: auto;
  top: 85%;
  font-family: 'Caveat', cursive;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.overlay h2 {
  font-size: 30px;
  color: white;
  width: auto;
  top: 90%;
  position: absolute;
  font-family: 'Caveat', cursive;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.brand-wrap {
  border-bottom: 1px black solid;
}

.item {
  width: 500px;
  margin: 30px;
  display: inline-block;
}

.slick-slidertwo {
  height: 100%;
  width: 100%;
}

.overlay-about {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

.wrap-about {
  width: 50%;
  padding-top: 175px;
  padding-left: 65px;
}

.overlay-about p {
  line-height: 27px;
  width: 700px;
}

.overlay-about h1 {
  color: goldenrod;
}

#about {
  text-decoration: none;
  line-height: 0;
  font-size: 0;
}

.wrap-service {
  padding-top: 95px;
  padding-left: 100px;
}

.services h1 {
  color: goldenrod;
  margin-left: -20px;
}

.services p {
  line-height: 30px;
  margin-left: -20px;
  width: 52%
}

#s1 {
  width: 600px;
  height: 600px;
  margin-right: 60px;
  display: block;
  -webkit-box-shadow: 5px 10px 16px 1px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 5px 10px 16px 1px rgba(0, 0, 0, 0.41);
  box-shadow: 5px 10px 16px 1px rgba(0, 0, 0, 0.41);
}

#underline {
  width: 50%;
  float: left;
  margin-top: -20px;
  margin-left: -20px;
}

.service-images {
  float: right;
  margin-top: 50px;
}

.service-items {
  width: 63%;
  display: inline-block;
  margin-left: -43px;
}

.wrap-service h1 {
  font-size: 55px;
  color: goldenrod;
}

.empty {
  height: 100px;
}

.footer {
  width: 100%;
  height: 50px;
  border-top: lightgrey 1px solid;
  text-align: center;
}

#googleMap {
  width: 80%;
  height: 100vh;
  float: left;
}

.contact-wrap {
  width: 100%;
  display: table;
}

.contact {
  height: 100vh;
  width: 19.8%;
  float: right;
  border-left: 2px solid black;
}

.menubar.two {}

.contact p {
  line-height: 10px;
  text-align: center;
  font-weight: bold;
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
  /* Styles */
}


/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

<!Doctype html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>R&R Cycle: Motorcycle and ATV Service Center</title>
  <!-- Main CSS + Slick Slider CSS Files -->
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="slick/slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="slick/slick/slick-theme.css" />
  <!-- Google Fonts, FontAwesome, Favicon, Crawler JS for brands scroll -->
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
  <link rel="shortcut icon" type="image/x-icon" href="img/favicon-motorcycle.ico" />
  <script src="js/crawler.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="fa/css/font-awesome.min.css">
  <!-- JQuery -->
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <!-- AOS for scroll animations -->
  <script src="aos-master/dist/aos.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="aos-master/dist/aos.css" /> </head>

<body>
  <!-- Start Menu -->
  <div class="menubar">
    <a href="#" class="logo"></a>
    <ul class="mainmenu">
      <li><a style="color:goldenrod;" href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#portfolio">Part Catalogs</a></li>
      <li><a href="/contact">Contact / Hours</a></li>
    </ul>
  </div>
  <!-- Splash Page Slider + Overlay info -->
  <div class="slider-contain">
    <div class="overlay">
      <img id="logo" align="right" src="img/R&R.png" alt="">
      <p>Service and Repair for All Makes and Models Since 1979!</p>
      <h2>Call Us Today: 845-336-5910</h2>
    </div>
    <div class="slick-slider">
      <div class="a-slide" style="background: url('img/slider-4.jpeg') no-repeat center center"></div>
      <div class="a-slide" style="background: url('img/slider-2.jpeg') no-repeat center center"></div>
      <div class="a-slide" style="background: url('img/slider-3.jpeg') no-repeat center center"></div>
      <div class="a-slide" style="background: url('img/slider-5.jpg') no-repeat center center"></div>
      <div class="a-slide" style="background: url('img/sunset-summer-motorcycle.jpg') no-repeat center center"></div>
    </div>
  </div>
  <!--Brands slider w/ Crawler JS -->
  <br />
  <div class="brand-wrap">
    <div id="brands"> <img id="banner" src="img/banner.jpg" /> </div>
  </div>
  <!-- End Brand Slider -->
  <!-- About Us Slider + Info -->
  <div class="slider-contain">
    <div class="overlay-about">
      <a id="about"></a>
      <div class="wrap-about">
        <h1>About "The Shop"</h1>
        <p data-aos="fade-up">We are nestled in the scenic Catskill mountains in the Hudson River Valley, home to some of the best riding areas in the northeast. Situated about 2 hrs. north of New York City and just a few miles from I-87 (New York State Thru-Way) exit 19,
          Kingston. R&R Cycle was started in 1979 by brothers Frank Rua & Henry Rua.
          <br/>
          <br /> As in many small businesses, it was launched out of the passion and enjoyment of the sport, along with the frustration with impersonal, overpriced corporate dealership attitude. With Frank's technical skills from his AMI (American Motorcycle
          Institute) certification and Henry's business knowledge, R&R Cycle was born. In 1985 Steve Mulford joined our shop family. Steve also attended and became certified at AMI in Daytona Beach, Florida. He has a vast acquired knowledge of motorcycles
          and ATVs. With almost 30 years of experience in real world shop situations, he has no equal in our area. Frank and Steve are both lifetime career mechanics, enthusiasts, and advocates for safe and responsible riding. We continue after almost
          40 years to be small enough and personal, but yet large enough to attend to all your powersports needs. We have acquired a huge network of suppliers, vendors, and salvage yards all over the USA for hard to find items and parts. If you are in
          our area please stop bye and say, Hi.</p>
      </div>
    </div>
    <div class="slick-slidertwo">
      <div class="a-slide" style="background: url('img/a1.JPG') no-repeat center center"></div>
      <div class="a-slide" style="background: url('img/a2.JPG') no-repeat center center"></div>
      <div class="a-slide" style="background: url('img/a3.JPG') no-repeat center center"></div>
    </div>
  </div>
  <!-- End About Us -->
  <!-- AOS: http://michalsnik.github.io/aos/ -->
  <div class="wrap-service">
    <a id="services"></a>
    <div class="services">
      <h1 style="font-size:45px;">A Business Built On Service.</h1>
      <div class="service-images">
        <div id="s1" class="slick-serviceone">
          <div class="a-slide" style="background: url('img/s1.JPG') no-repeat center center"></div>
          <div class="a-slide" style="background: url('img/s2.JPG') no-repeat center center"></div>
          <div class="a-slide" style="background: url('img/s3.JPG') no-repeat center center"></div>
        </div>
      </div>
      <p data-aos="fade-up"> Our Business is built on service. Together, Frank and Steve have over 50 years of real world shop experience. They are both AMI (American Motorcycle Institute) Certified mechanics. We have been in the same location for over 30 years. Our goal is
        to get the job done right the first time. Listening and understanding our customers and their needs is essential to achieving this goal.
        <br />
        <br />In addition to the usual tune ups, we sell and install hundreds of top name brand tires each season with state of the art mounting and computer tire balancing equipment. We are second to none for carburetor and electrical troubleshooting,
        diagnosis, repair. Our new Ultrasonic carb cleaning tank does a great job. Complex electrical charging & ignition systems on modern units require accurate testing before expensive components are purchased. Whether its motorcycles or ATV's. </p>
    </div>
    <br />
    <br />
    <hr id="underline">
    <div class="service-items">
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Complete engine overhauls- top end - bottom end</div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Transmission rebuilds - shift forks - gears - etc...</div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Wheel lacing & truing</div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Crankshaft rebuilding </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Fork tube straightening </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Cylinder boring/honing </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Valve reconditioning </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Front end alignment </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Accident damage </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Pre Purchase appraisal of used cycles / ATV's </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Pick Up & Delivery Available </div>
      <div class="item" data-aos="flip-up"><i class="fa fa-check-circle-o" aria-hidden="true"></i> Custom fabrication- lighting,wheels,fenders,exhaust, etc...</div>
    </div>
    <!-- Temp Break to see animation for all items -->
  </div>
  <div class="empty"></div>
  <!-- Footer for Copyright and stuff like that, a little fame for me... -->
  <div class="footer">

    <p style="color:grey;">© 2017 R&R Cycle Inc. | Designed By Frank Rua. | frankselectronicmail@gmail.com</p>
  </div>
  <!-- End footer -->
  <!-- --------------------------<Scripts>---------------------------------- -->
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick/slick.min.js"></script>
  <script src="js/slideshow.js" type="text/javascript"></script>
  <script src="js/smoothscroll.js" type="text/javascript"></script>
  <script src="js/banner.js" type="text/javascript"></script>
  <script src="js/aso.js" type="text/javascript"></script>
</body>

</html>

我从另一个站点提取媒体查询以加快该过程，但我尝试了几种不同的方法来转换我的 CSS，但没有任何效果。包括在屏幕变小时使我的文本“Divs”变小，但所有所做的只是因为位置发生变化而切断了更多文本。这是我尝试的最后一个解决方案，只是使用以下方法转换页面主体:

  left: x%;
  transform: translate(-x%, -x);
  top: x%;

这让我没有任何进展，只是一个按一定比例分割的页面。我一直在阅读关于如何做到这一点的文章，但我无法理解它；响应式设计是我相当陌生的东西，我不确定如何改变它。有人可以给我这个网页的例子吗？

这是一个 Screenfly，因此您可以看到我在说什么，“The Shop”下的文字被截断了。 Screenfly Example

我知道这样的问题很容易被否决，但我宁愿有人给我一个真实的例子，我正在使用的网页，然后是一个解释，而不是从互联网上拿走的一般例子，这是我现在正在努力的事情。谢谢大家!

Answer 1

你的媒体查询将不起作用，因为你没有放置任何 css 选择器来应用样式。请看这个simple media queries example .

p{
    font-family: arial,san-serif;   
    font-size: 13px;
    font-color: black;
}

h1{
    font-size:30px;   
}

@media screen and (min-width:761px){
    body{
        background-color:white;
    }
    h1{
        color:red;
    }    
}

@media screen and (max-width:760px){
    body{
        background-color: #333;
    }
    h1{
        color:red;
    }  
    p{
        color: white;
    }
}

@media screen and (max-width:480px){
    body{
        background-color: #807f83;
    }
    h1{
        color:white;
    }  
    p{
        color: white;
    }
}

@media screen and (max-width:360px){
    body{
        background-color: #0096d6;
    }
    h1{
        color:white;
        font-size:25px;
    }  
    p{
        color: white;
    }
}

在媒体查询中，您应该添加 css 选择器，然后应用样式规则