网站的响应性

我正在重建一个更具个性化设计的网站。我希望这个新版本能够响应;然而，当我尝试缩小浏览器窗口时，它只响应某个点。可能是什么问题？网站的响应性

我在想它可能是我的骷髅css的东西，但我不确定，并且在响应式网站设计上目前还不是很了解（但是在工作）。

我将包括我的骨架CSS代码以及下面。

感谢您的帮助。

这里是我的html

 <body> 

    <div id="Banner"> 



    </div> 

    <h1 id="Mission">Creating a Church Unchurched People Love to Attend</h1> 

    <div id="Menu"> 

    </div> 


</body>

家居时尚CSS

body 
{ 
    background: rgb(111,111,111); 
} 

#Banner 
{ 
    width: 100%; /*1200px*/ 
    height: 800px; 
    background: url("../header.jpg") no-repeat 55%; 
    background-size: contain; 
}

CSS

/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */ 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} 

/* Box Model */ 

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

/* Container */ 

body { 
    /* min-width: (containers) */ 
    min-width: 1200px; 
} 

.container { 
    margin-left: auto; 
    margin-right: auto; 

    /* width: (containers) */ 
    width: 1200px; 
} 

/* Modifiers */ 

    .container.small { 
     /* width: (containers) * 0.75; */ 
     width: 900px; 
    } 

    .container.big { 
     width: 100%; 

     /* max-width: (containers) * 1.25; */ 
     max-width: 1500px; 

     /* min-width: (containers); */ 
     min-width: 1200px; 
    } 

/* Grid */ 

.\31 2u { width: 100% } 
.\31 1u { width: 91.6666666667% } 
.\31 0u { width: 83.3333333333% } 
.\39 u { width: 75% } 
.\38 u { width: 66.6666666667% } 
.\37 u { width: 58.3333333333% } 
.\36 u { width: 50% } 
.\35 u { width: 41.6666666667% } 
.\34 u { width: 33.3333333333% } 
.\33 u { width: 25% } 
.\32 u { width: 16.6666666667% } 
.\31 u { width: 8.3333333333% } 
.\-11u { margin-left: 91.6666666667% } 
.\-10u { margin-left: 83.3333333333% } 
.\-9u { margin-left: 75% } 
.\-8u { margin-left: 66.6666666667% } 
.\-7u { margin-left: 58.3333333333% } 
.\-6u { margin-left: 50% } 
.\-5u { margin-left: 41.6666666667% } 
.\-4u { margin-left: 33.3333333333% } 
.\-3u { margin-left: 25% } 
.\-2u { margin-left: 16.6666666667% } 
.\-1u { margin-left: 8.3333333333% } 

/* Rows */ 

    .row > * { 
     float: left; 
    } 

    .row:after { 
     content: ''; 
     display: block; 
     clear: both; 
     height: 0; 
    } 

    .row:first-child > * { 
     padding-top: 0 !important; 
    } 

    .row.uniform > * > :first-child { 
     margin-top: 0; 
    } 

    .row.uniform > * > :last-child { 
     margin-bottom: 0; 
    } 

    /* Normal */ 

     .row > * { 
      /* padding-left: (gutters) */ 
      padding-left: 40px; 
     } 

     .row + .row > * { 
      /* padding: (gutters) 0 0 (gutters) */ 
      padding: 40px 0 0 40px; 
     } 

     .row { 
      /* margin-left: -(gutters) */ 
      margin-left: -40px; 
     } 

     .row + .row.uniform > * { 
      /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ 
      padding: 40px 0 0 40px; 
     } 

    /* Flush */ 

     .row.flush > * { 
      padding-left: 0; 
     } 

     .row + .row.flush > * { 
      padding: 0; 
     } 

     .row.flush { 
      margin-left: 0; 
     } 

     .row + .row.uniform.flush > * { 
      padding: 0; 
     } 

    /* Quarter */ 

     .row.quarter > * { 
      /* padding-left: (gutters * 0.25) */ 
      padding-left: 10px; 
     } 

     .row + .row.quarter > * { 
      /* padding: (gutters * 0.25) 0 0 (gutters * 0.25) */ 
      padding: 10px 0 0 10px; 
     } 

     .row.quarter { 
      /* margin-left: -(gutters * 0.25) */ 
      margin-left: -10px; 
     } 

     .row + .row.uniform.quarter > * { 
      /* padding: (gutters.vertical * 0.25) 0 0 (gutters.vertical * 0.25) */ 
      padding: 10px 0 0 10px; 
     } 

    /* Half */ 

     .row.half > * { 
      /* padding-left: (gutters * 0.5) */ 
      padding-left: 20px; 
     } 

     .row + .row.half > * { 
      /* padding: (gutters * 0.5) 0 0 (gutters * 0.5) */ 
      padding: 20px 0 0 20px; 
     } 

     .row.half { 
      /* margin-left: -(gutters * 0.5) */ 
      margin-left: -20px; 
     } 

     .row + .row.uniform.half > * { 
      /* padding: (gutters.vertical * 0.5) 0 0 (gutters.vertical * 0.5) */ 
      padding: 20px 0 0 20px; 
     } 

    /* One and (a) Half */ 

     .row.oneandhalf > * { 
      /* padding-left: (gutters * 1.5) */ 
      padding-left: 60px; 
     } 

     .row + .row.oneandhalf > * { 
      /* padding: (gutters * 1.5) 0 0 (gutters * 1.5) */ 
      padding: 60px 0 0 60px; 
     } 

     .row.oneandhalf { 
      /* margin-left: -(gutters * 1.5) */ 
      margin-left: -60px; 
     } 

     .row + .row.uniform.oneandhalf > * { 
      /* padding: (gutters.vertical * 1.5) 0 0 (gutters.vertical * 1.5) */ 
      padding: 60px 0 0 60px; 
     } 

    /* Double */ 

     .row.double > * { 
      /* padding-left: (gutters * 2) */ 
      padding-left: 80px; 
     } 

     .row + .row.double > * { 
      /* padding: (gutters * 2) 0 0 (gutters * 2) */ 
      padding: 80px 0 0 80px; 
     } 

     .row.double { 
      /* margin-left: -(gutters * 2) */ 
      margin-left: -80px; 
     } 

     .row + .row.uniform.double > * { 
      /* padding: (gutters.vertical * 2) 0 0 (gutters.vertical * 2) */ 
      padding: 80px 0 0 80px; 
     }

来源

2014-10-02 Jason W

那么，你的body标签被限制到最低的1200像素，所以如果你想知道为什么它只对某一点“反应灵敏”，这可以解释它（至少在水平方面）。如果没有一些HTML或链接来查看你所看到的内容，很难诊断。

如果您正在寻求帮助来学习如何编写响应HTML/CSS，您可以从css-tricks.com观看this explanation。

来源

2014-10-02 19:37:18 chazsolo

感谢您的链接。我已经添加了我的代码的其余部分来帮助诊断问题 – 2014-10-02 19:40:56

嗯，我觉得很蠢，这是限制。谢谢 – 2014-10-02 19:42:07

网站的响应性

回答

相关问题