将固定网站更改为流畅（CSS）

Question

我目前正在开发一个响应迅速的网站。我是CSS的新手。 我计划将@media断点包括在内。在决议遇到断点之前，我真的希望整个网站都是流畅的，并且“适合屏幕”而不是固定不变。

因为这个网站在交给我之前是由其他人编码的，所以我不确定从哪里开始更改它。任何帮助将不胜感激。

@charset“UTF-8”; / * CSS Document * /

/*Vivid Global Styling*/
html {
    height: 100%;
}
body {
    margin:0px;
    padding:0px;




    }
h1,h2,h3,h4,h5,h6,p,ul,li,span {
    margin:0px;
    padding:0px;
    }
h1 {
    margin:0 0 14px 0;
    }
h2 { 
    margin:0 0 10px 0;
    }
.wht {
    color:#fff;
    }
.clear {
    clear:both;
    }
/*Vivid Page Settings*/
header {
    width:100%;
    background-color:#fff;
    border-bottom:#000 1px solid;
    }
.vd-hide {
    display:none;
    }
.vd-settings-wrapper {
    width:15%;
    max-width:200px;
    }
.vd-user-settings {
    width:48px;
    height:48px;
    border:1px solid #000;
    background-color:#fff;
    float:left;
    margin: 12px 2px 0 21px;
    }
.vd-currency-selector {
    width:58px;
    height:21px;
    border:1px solid #000;
    background-color: #fff;
    float:left;
    margin: 12px 2px 1px 2px;
    }
.vd-language-selector {
    width:58px;
    height:21px;
    border:1px solid #000;
    background-color: #fff;
    float:left;
    margin:3px 2px 0 2px;
    }

/*Vivid Main Navigation*/
.vd-nav-wrapper {
    width:75%;
    height:78px;
    margin:0 auto;
    text-align:center;
    }
.vd-nav-wrapper ul {
    font-family: 'Montserrat', sans-serif;
    text-align:center;
    list-style: none;
    padding: 0;
    margin: 0;
    }
.vd-nav-wrapper li {
    text-decoration:none;   
    list-style:none;
    display:inline-block;
    margin: 22px 20px;
    vertical-align: middle;
    }
.vd-nav-wrapper a {
    text-decoration:none;   
    list-style:none;
    display:inline-block;
    margin: 18px 20px;
    vertical-align: middle;
    }
.vd-logo-img {
    margin:0px;
    padding:0px;

    }
/*Vivid Checkout Settings*/ 
.vd-cart-wrapper {
    width:10%;
    z-index:10;
    }
.vd-cart-selector {
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    background-color: #fff;
    margin: -11px 31px 0 2px;
    position: absolute;
    top: 23px;
    right: -9px;
    }

/*Vivid Main Wrapper*/  

.vd-page-container {
    max-width: 100%;
    margin:0 auto;
    height: auto;
    }

/*Vivid Grid*/  
.vd-grid h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif;
    line-height:32px;
    color:#fff;
    }
.vd-grid p,span  {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    line-height:17px;
    font-size:0.85em;
    margin:0;
    padding:0;
    color:#fff;
    }
.vd-grid h1 {
    margin:0;
    padding:0;
}
.vd-grid h2 { 
    font-size:1.2em;
    margin:0 0 4px 0;
    }
.vd-grid h3 { 
    margin:4px 0 4px 0;
    }
.vd-grid h4 { 
    margin:4px 0 4px 0;
    }
.vd-grid {
    width:1262px;
    margin:13px auto;

    }
.vd-grid-left-col {
    width:980px;
    float:left;
    }
.vd-grid-right-col {
    width:265px;
    float:left;
    }   
.vd-grid-main-box {
    width: 920px;
    height: 460px;
    background-color: #000029;
    padding: 20px 30px;
    }
.vd-grid-main-box img {
    width:100%;
    height:auto;
    position:absolute;

    }
.vd-grid-sub-box {
    width:270px;
    height:146px;
    background-image:url(../img/granda_hj.jpg);
    background-size:cover;
    background-position:top center;
    background-color:#000029;
    float:left;
    padding: 15px 25px;
    margin:0 0 15px 0;
    }
.vd-grid-xtra-box {
    width:225px;
    height:318px;
    background-image:url(../img/tst_img.jpg);
    background-size:cover;
    background-position:center center;
    background-color:#000029;
    padding: 10px 20px;
    }
.vd-text-wrap {
    width:100%;
    position:relative;
    top:340px;
    left:0px;
    }
.vd-margin-top {
    margin-top:10px;
    }
.vd-margin-right {
    margin-right:10px;
    }
.vd-margin-left {
    margin-left:10px;
    }
.vd-margin-bottom {
    margin-bottom:10px;
    }
/*Vivid Footer*/    
.vd-footer {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    line-height:16px;
    padding: 0 30px;
    padding-bottom: 55px;
    width: 100%;
    background-color: #000029;
    -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vd-widget-area {
    padding: 15px 0 10px;
    border-top: 0px solid #e5e5e5;
    max-width: 1260px;
    margin: 0 auto 0px;
}
.vd-footer-text {
    display: inline-block;
    vertical-align: top;
    width: 26%;
    padding-right: 60px;
    font-size: 12px;
    color: white;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vd-footer-links {
    display: inline-block;
    vertical-align: top;
    padding: 0 30px 25px 0;
    width: 12%;
    line-height:22px;
    font-size: 12px;
    color: white;
}
.vd-footer-links ul {
    margin: 0;
    padding: 0;
    list-style: outside none;
    display: block;
    vertical-align: top;
}
.vd-footer-links li {
    font-size: 12px;
    color: white;
    text-decoration:none;
    }
.vd-footer-links a {
    font-size: 12px;
    color: #ccc;
    text-decoration:none;
    }
.vd-footer-links a:hover {
    font-size: 12px;
    color: white;
    }
.vd-footer-title {
    font-family: 'Montserrat', sans-serif;
}
.vd-signup {
    display: inline-block;
    max-width: 305px;
    width: 26%;
    font-size: 12px;
}
.vd-sub-footer {
    border-top: 1px solid #e5e5e5;
    padding-top: 25px;
    margin-top: 0px;
    font-size: 0;
    max-width: 1260px;
    margin: 0 auto;
}
/*Vivid Payment Icons*/ 
.vd-payment-icon {
    font-size: 20px;
    vertical-align: middle;
    line-height: 1.2;
    color: #a7a7a7;
}
.vd-footer-linklist .vd-social-icon:before {
    font-size: 16px;
    width: 16px;
    text-align: center;
    margin-right: 5px;
    font-family: 'Social Icons';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vd-payment-options {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 12px;
    text-decoration:none;
    display:block;
    list-style: outside none;
}

.vd-payment-options ul {
    display:block-inline;
    list-style-type:outside none;

}
.vd-payment-options li {
    display:block-inline;
    float:right;
    padding: 0 0 0 10px;
    list-style-type:outside none;

}
.american-express:before {
    content: "\f001";
}
.bitcoin:before {
    content: "\f006";
}
.jcb:before {
    content: "\f028";
}
.master:before {
    content: "\f02d";
}
.paypal:before {
    content: "\f033";
}
.visa:before {
    content: "\f045";
}
/*Vivid Copyright*/ 
.vd-copyright-wrapper {
    float: left;
    margin: 0;
    width: 50%;
    font-size: 12px;
    color: white;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Vivid Shop Display</title>
<link rel="stylesheet" href='css/vivid-style.css'>
<link rel='stylesheet' href='css/scroller.css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>
<header>
<div class="vd-navigation-wrapper">
     <div class="vd-settings-wrapper">
        <div class="vd-user-settings">
        </div>
        <div class="vd-currency-selector">
        </div>
        <div class="vd-language-selector">
        </div>
     </div>
     <div class="vd-nav-wrapper">
            <ul>
                <li>Shop</li>
                <li>About</li>
                <li class="vd-logo-img"><img src="img/vivid_logo.png"/></li>
                <li>Lookbook</li>
                <li>Contact</li>
            </ul>
     </div>
      <div class="vd-cart-wrapper">
       <div class="vd-cart-selector"></div>
      </div>

</div>

<!--Mobile Navigation-->
  <nav class="vd-hide">
  <div class="header-top clearfix">
   <a class="nav toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
    </a>
    <h1 class="logo"><a href="#firstSection"><img src="img/harva_logo.png"/></a></h1>
  </div>
    <ul id="menu">
      <li data-menuanchor="firstSection">
        <a href="#firstSection" title="First Section">First Section</a>
      </li>
      <li data-menuanchor="secondSection">
        <a href="#secondSection" title="Second Section">Second Section</a>
      </li>
      <li data-menuanchor="thirdSection">
        <a href="#thirdSection" title="Second Section">Third Section</a>
      </li>
      <li data-menuanchor="fourthSection">
        <a href="#fourthSection" title="Fourth Section">Fourth Section</a>
      </li>
      <li data-menuanchor="fifthSection">
        <a href="#fifthSection" title="First Slide">First Slide</a>
      </li>
      <li data-menuanchor="fifthSection/1">
        <a href="#fifthSection/1" title="Second Slide">Second Slide</a>
      </li>
    </ul>
  </nav>
  </div>
 </header>
<!--End Mobile Navigation-->

<div class="vd-page-container">
 <div class="vd-grid">
  <div class="vd-grid-left-col">
    <div class="vd-grid-main-box vd-margin-bottom">
     <div class="vd-text-wrap">
        <h1>Header Text</h1>
        <h2>Secondary Title</h2>
        <p>Featured Text Here over two lines
if needed place here.</p>
</div>
    </div>
    <div class="vd-grid-sub-box">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
    <div class="vd-grid-sub-box vd-margin-right vd-margin-left">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
    <div class="vd-grid-sub-box">
        <h3>Header Text</h3>
        <p>Featured Text Here over two lines
if needed place here.</p>
    </div>
   </div>
    <div class="vd-grid-right-col vd-margin-left">
     <div class="vd-grid-xtra-box">
      <h4>Header Text</h4>
      <p>Featured Text Here over two lines
if needed place here.</p>
     </div>
      <div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom">
     <h4>Header Text</h4>
      <p>Featured Text Here over two lines
if needed place here.</p>
     </div>
    </div>
 </div>
</div>
<div class="clear"></div>
    <footer class="vd-footer">
       <div class="vd-widget-area">
        <div class="vd-footer-text">
            <h4 class="vd-footer-title">V I V I D - SHOPIFY THEME</h4>
          <div class="rte">V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!</div>
        </div>
          <div class="vd-footer-links">
              <h4 class="vd-footer-title">HELP</h4>
            <ul>
                <li><a class="" href="#">HELP | FAQ'S</a></li>
                <li><a class="" href="#">RETURNS</a></li>
                <li><a class="" href="#">HOW TO SHOP</a></li>
                <li><a class="" href="#">CONTACT US</a></li>
                <li><a class="" href="#">STOCKISTS</a></li>
            </ul>
          </div>
         <div class="vd-footer-links">
          <h4 class="vd-footer-title">POLICIES</h4>
            <ul>
                <li><a class="" href="#">DELIVERY &amp; RETURNS POLICY</a></li>
                <li><a class="" href="#">TERMS &amp; CONDITIONS</a></li>
                <li><a class="" href="#">PRIVACY POLICY</a></li>
                <li><a class="" href="#">SECURITY POLICY</a></li>
            </ul>
          </div>
    <div class="vd-footer-links">
         <h4 class="vd-footer-title">CONNECT</h4>
            <ul>
                <li><a class="vd-social-icon facebook" href="#" target="_blank">FACEBOOK</a></li>
                <li><a class="vd-social-icon twitter" href="#" target="_blank">TWITTER</a></li>
                <li><a class="vd-social-icon instagram" href="#" target="_blank">INSTAGRAM</a></li>
                <li><a class="vd-social-icon vimeo" href="#" target="_blank">VIMEO</a></li>
            </ul>
          </div>
        <div class="vd-signup">
            <h4 class="vd-footer-title">SIGN UP TO OUR NEWSLETTER</h4>
          <div class="wht">HTML Block to be added here for embedded email capture forms</div>
        </div>
    </div>
  <div class="vd-sub-footer">
      <ul class="vd-payment-options">
          <li class="vd-payment-icon american-express"></li>
          <li class="vd-payment-icon bitcoin"></li>
          <li class="vd-payment-icon jcb"></li> 
          <li class="vd-payment-icon master"></li>
          <li class="vd-payment-icon paypal"></li>
          <li class="vd-payment-icon visa"></li> 
      </ul>
    <div class="vd-copyright-wrapper">
      <p class="vd-copyright">Copyright © 2017 V I V I D Themes.</p>
      <p class="vd-attribution">"Virtual Visual Merchandising"</p>
    </div>
  </div>
</footer>
</body>
</html>

Answer 1

使用@media时，此部分仅用于您指定的任何媒体。

当你特别要求断点时，这可能会让你开始： 保持你的css不变，然后添加/覆盖较小屏幕尺寸的属性。

一个例子是（在你的CSS末尾）：

@media (max-width: 600px) {
  .vd-grid-sub-box {
    clear: left;
    width: 100%;
  }

https://jsfiddle.net/etkz6zrv/

希望您也可以将其用于其他选择器（稍加耐心）。