将固定网站更改为流畅（CSS） [英] Changing a fixed website to being fluid (CSS)
本文介绍了将固定网站更改为流畅（CSS）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在开发一个网站以进行响应。我是CSS新手。
我有一个包含@media断点的计划来实现这一点。在决议达到一个断点之前，我真的希望整个网站流畅，适合屏幕，而不是像现在这样修复。
因为这个网站是在交给我之前由别人编码，我不确定从哪里开始改变它。任何帮助将不胜感激。
@charsetUTF-8;
/ * CSS文档* /
/ * Vivid Global Styling * /
html {
高度：100％;
}
正文{
保证金：0px;
padding：0px;
}
h1，h2，h3，h4，h5，h6，p，ul，li，span {
margin ：0像素;
padding：0px;
}
h1 {
margin：0 0 14px 0;
}
h2 {
margin：0 0 10px 0;
}
.wht {
color：#fff;
}
.clear {
clear：both;
}
/ *生动页面设置* /
标题{
宽度：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;
身高：48px;
border：1px solid＃000;
background-color：#fff;
float：left;
margin：12px 2px 0 21px;
}
.vd-currency-selector {
width：58px;
身高：21px;
border：1px solid＃000;
background-color：#fff;
float：left;
保证金：12px 2px 1px 2px;
}
.vd-language-selector {
宽度：58px;
身高：21px;
border：1px solid＃000;
background-color：#fff;
float：left;
margin：3px 2px 0 2px;
}
/ *生动的主导航* /
.vd-nav-wrapper {
宽度：75％;
身高：78px;
保证金：0自动;
text-align：center;
}
.vd-nav-wrapper ul {
font-family：'Montserrat'，sans-serif;
text-align：center;
list-style：none;
padding：0;
保证金：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;
}
/ *生动的结账设置* /
.vd-cart-wrapper {
宽度：10％;
z-index：10;
}
.vd-cart-selector {
宽度：48px;
height：48px;
border：1px solid＃000;
background-color：#fff;
保证金：-11px 31px 0 2px;
位置：绝对;
top：23px;
right：-9px;
}
/ * Vivid Main Wrapper * /
.vd-page-container {
max-width：100％;
margin：0 auto;
height：auto;
}
$ b $ * / *生动的网格* /
.vd-grid h1，h2，h3，h4，h5，h6 {
font-family：'Montserrat' ， 无衬线字体;
行高：32px;
颜色：#fff;
}
.vd-grid p，span {
font-family：Gill Sans，Gill Sans MT，Myriad Pro，DejaVu Sans Condensed，Helvetica，Arial ， 无衬线字体;
line-height：17px;
字体大小：0.85em;
保证金：0;
padding：0;
颜色：#fff;
}
.vd-grid h1 {
margin：0;
padding：0;
}
.vd-grid h2 {
font-size：1.2em;
保证金：0 0 4px 0;
}
.vd-grid h3 {
margin：4px 0 4px 0;
}
.vd-grid h4 {
保证金：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;
身高：460px;
背景颜色：＃000029;
padding：20px 30px;
}
.vd-grid-main-box img {
width：100％;
身高：汽车;
位置：绝对;
}
.vd-grid-sub-box {
宽度：270px;
height：146px;
background-image：url（../ img / granda_hj.jpg）;
background-size：cover;
background-position：top center;
背景颜色：＃000029;
float：left;
padding：15px 25px;
margin：0 0 15px 0;
}
.vd-grid-xtra-box {
width：225px;
身高：318px;
background-image：url（../ img / tst_img.jpg）;
background-size：cover;
背景位置：中心;
background-color：＃000029;
填充：10px 20px;
}
.vd-text-wrap {
宽度：100％;
职位：亲属;
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;
/ $ * b / *鲜艳页脚* /
.vd-footer {
字体系列：Gill Sans，Gill Sans MT，Myriad Pro，DejaVu Sans Condensed，Helvetica，Arial，sans-serif;
line-height：16px;
填充：0 30px;
padding-bottom：55px;
宽度：100％;
背景颜色：＃000029;
-webkit-transition：不透明度0.2s立方贝塞尔（0.25,0.46,0.45,0.94）， - webkit-transform 0.2s立方贝塞尔（0.25,0.46,0.45,0.94）;
-moz-transition：不透明度0.2s立方贝塞尔（0.25,0.46,0.45,0.94）， - moz-变换0.2s立方贝塞尔（0.25,0.46,0.45,0.94）;
过渡：不透明度0.2s cubic-bezier（0.25,0.46,0.45,0.94），变换0.2s cubic-bezier（0.25,0.46,0.45,0.94）;
}
.vd-widget-area {
padding：15px 0 10px;
border-top：0px solid＃e5e5e5;
最大宽度：1260px;
margin：0 auto 0px;
}
.vd-footer-text {
display：inline-block;
vertical-align：top;
宽度：26％;
padding-right：60px;
font-size：12px;
颜色：白色;
-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;
宽度：12％;
line-height：22px;
font-size：12px;
颜色：白色;
}
.vd-footer-links ul {
margin：0;
填充：0;
list-style：outside none;
display：block;
vertical-align：top;
}
.vd-footer-links li {
font-size：12px;
颜色：白色;
text-decoration：none;
}
.vd-footer-links a {
font-size：12px;
颜色：#ccc;
text-decoration：none;
}
.vd-footer-links a：hover {
font-size：12px;
颜色：白色;
}
.vd-footer-title {
font-family：'蒙特塞拉特'，sans-serif;
}
.vd-signup {
display：inline-block;
max-width：305px;
宽度：26％;
font-size：12px;
}
.vd-sub-footer {
border-top：1px solid＃e5e5e5;
padding-top：25px;
margin-top：0px;
font-size：0;
最大宽度：1260px;
margin：0 auto;
}
/ *鲜艳的付款图标* /
.vd-payment-icon {
font-size：20px;
vertical-align：middle;
行高：1.2;
颜色：＃a7a7a7;
}
.vd-footer-linklist .vd-social-icon：在{
font-size：16px;
宽度：16px;
text-align：center;
margin-right：5px;
font-family：'社交图标';
display：inline-block;
vertical-align：middle;
line-height：1;
font-weight：normal;
font-style：normal;
说：无;
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;
宽度：50％;
保证金：0;
填充：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：之前{
content：\f001;
}
.bitcoin：在{
content：\ f006之前;
}
.jcb：在{
content：\ f028之前;
}
.master：在{
content：\ f02d之前;
}
.paypal：在{
content：\ f033之前;
}
.visa：before {
content：\f045;
}
/ *鲜明版权* /
.vd-copyright-wrapper {
float：left;
保证金：0;
宽度：50％;
font-size：12px;
颜色：白色;
-moz-font-smoothing：none;
font-smoothing：antialiased;
-webkit-font-smoothing：antialiased;
}
HTML：
<！doctype html>
< html>
< head>
< meta charset =UTF-8>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta name =apple-mobile-web-app-status-bar-stylecontent =black-translucent>
< title> Vivid Shop Display< / title>
< link rel =stylesheethref ='css / vivid-style.css'>
< link rel ='stylesheet'href ='css / scroller.css'>
< link href =https://fonts.googleapis.com/css?family=Montserrat =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>关于< / li>
< li class =vd-logo-img>< img src =img / vivid_logo.png/>< / li>
< li> Lookbook< / li>
< li>联系< / li>
< / ul>
< / div>
< div class =vd-cart-wrapper>
< div class =vd-cart-selector>< / div>
< / div>
< / div>
<！ - 移动导航 - >
< nav class =vd-hide>
< div class =header-top clearfix>
< a class =nav toggle-menuhref =＃>
< 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 =＃firstSectiontitle =第一部分>第一部分< / a>
< / li>
< li data-menuanchor =secondSection>
< a href =＃secondSectiontitle =第二部分>第二部分< / a>
< / li>
< li data-menuanchor =thirdSection>
< a href =＃thirdSectiontitle =第二部分>第三部分< / a>
< / li>
< li data-menuanchor =fourthSection>
< a href =＃fourthSectiontitle =第四部分>第四部分< / a>
< / li>
< li data-menuanchor =fifthSection>
< a href =＃fifthSectiontitle =第一张幻灯片>第一张幻灯片< / a>
< / li>
< li data-menuanchor =fifthSection / 1>
< a href =＃fifthSection / 1title =Second Slide> Second Slide< / a>
< / li>
< / ul>
< / nav>
< / div>
< / header>
<！ - 终端移动导航 - >
< 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>标题文字< / h1>
< h2>次要标题< / h2>
< p>精选文本这里有两行
（如果需要的话）放在这里。< / p>
< / div>
< / div>
< div class =vd-grid-sub-box>
< h3>标题文字< / h3>
< p>精选文本这里有两行
（如果需要的话）放在这里。< / p>
< / div>
< div class =vd-grid-sub-box vd-margin-right vd-margin-left>
< h3>标题文字< / h3>
< p>精选文本这里有两行
（如果需要的话）放在这里。< / p>
< / div>
< div class =vd-grid-sub-box>
< h3>标题文字< / h3>
< p>特色文字此处超过两行
如果需要，请点击此处。< / p>
< / div>
< / div>
< div class =vd-grid-right-col vd-margin-left>
< div class =vd-grid-xtra-box>
< h4>标题文字< / h4>
< p>特色文字此处超过两行
如果需要，请点击此处。< / p>
< / div>
< div class =vd-grid-xtra-box vd-margin-top vd-margin-bottom>
< h4>标题文字< / h4>
< p>特色文字此处超过两行
如果需要，请点击此处。< / 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我V我D是一个可定制的主题，看起来和感觉太棒了。在视觉上令人惊叹的V I V I D Grid上展示您的产品，并选择您的结构，然后让V I V I D完成剩下的工作！< / div>
< / div>
< div class =vd-footer-links>
< h4 class =vd-footer-title> HELP< / h4>
< ul>
< li>< a class =href =＃>帮助| FAQ'S< / A>< /锂>
< li>< a class =href =＃> RETURNS< / a>< / li>
< li>< a class =href =＃>如何购物< / a>< / li>
< li>< a class =href =＃>联系我们< / 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; amp; amp; amp;退货政策< / a>< / li>
< li>< a class =href =＃> TERMS& amp; amp;状况及LT; / A>< /锂>
< 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 facebookhref =＃target =_ blank> FACEBOOK< / a>< / li>
< li>< a class =vd-social-icon twitterhref =＃target =_ blank> TWITTER< / a>< / li>
< li>< a class =vd-social-icon instagramhref =＃target =_ blank> INSTAGRAM< / a>< / li>
< li>< a class =vd-social-icon vimeohref =＃target =_ blank> VIMEO< / a>< / li>
< / ul>
< / div>
< div class =vd-signup>
< h4 class =vd-footer-title>注册我们的新闻通讯< / h4>
< div class =wht>为嵌入式电子邮件捕捉表单添加HTML块< / 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>版权所有©2017 V I V I D主题。< / p>
< / div>
< / div>
< / footer>
< / body>
< / html>
解决方案
使用 @media时/ code>此部分将仅用于您指定的任何媒体。
当您特别要求破发点时，可能会让您开始：
保持你的css原样，而不是为较小的屏幕尺寸添加/覆盖属性。
一个例子是（在你的css结尾处）：
@media（max-width：600px）{
.vd-grid-sub-box {
clear：剩下;
宽度：100％;
}
https://jsfiddle.net/etkz6zrv/
希望您也可以将其应用于其他选择器（与有点耐心）。
I currently am developing a website to be responsive. I am new to CSS. I have a plan to include @media breakpoints for this to happen. Before the resolution hits a breakpoint, I really want the whole website to be fluid and to 'fit the screen' rather than being fixed as it is.
Because this website was coded by someone else before it was handed to me, I am unsure where to start changing it. Any help would be greatly appreciated.
@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 & RETURNS POLICY</a></li>
<li><a class="" href="#">TERMS & 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>
解决方案
When using @media this part will be only used for whatever media you specify.
As you specifically asked for break-points this might get you started: Keep your css as it is, and than add/overwrite properties for lower screen sizes.
An example would be (at the end of your css):
@media (max-width: 600px) {
.vd-grid-sub-box {
clear: left;
width: 100%;
}
https://jsfiddle.net/etkz6zrv/
Hopefully you can to adopt this to the other selectors as well (with a little patience).
这篇关于将固定网站更改为流畅（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
