响应网站显示不正确

Question

我是相当新的网站，但发现它真棒，丰富的专业知识绕来绕去。我有一个网站没有100％正确显示手机的小问题。它的构建反应迅速，我的印象是最初工作的很好，但有些事情发生了变化。该网站自行调节以适应手机屏幕，但它不正确缩放，您必须手动酌减看到这一切在屏幕上。 我不是一个真正的开发者，但它应该是很容易解决，我认为。希望有人能帮忙。

下面我的代码：唯一

@media屏幕和（最大宽度：767px）{

.hide-for-small{ display: none; } 
#mesh-left{ display: none; } 
#mesh-right{ display: none; } 

.push-half{ left: 0; } 
.pull-half{ right: 0; } 

.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; } 
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; } 
.box-title h4{ color: #222 !important; } 

.form-title{ width: 100%; top: 0px; text-align: center; } 
#form-holder select{ width: 100%; } 
.form-input input{ width: 100%; } 
.form-input textarea{ width: 100%; text-align: center; height: 100px; } 


.show-for-small{ display: block; } 

#contact{ padding: 44px 15px 44px 15px; text-align: center !important; } 

#logo{ margin-top: 55px; } 
.social-header{ top:2%; left: 35%;} 
#main-menu{ margin-left:0;} 

} @media屏幕和（最大宽度：370px）{

.hide-for-small{ display: none; } 
#mesh-left{ display: none; } 
#mesh-right{ display: none; } 

.push-half{ left: 0; } 
.pull-half{ right: 0; } 

.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; } 
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; } 
.box-title h4{ color: #222 !important; } 

.form-title{ width: 100%; top: 0px; text-align: center; } 
#form-holder select{ width: 100%; } 
.form-input input{ width: 100%; } 
.form-input textarea{ width: 100%; text-align: center; height: 100px; } 


.show-for-small{ display: block; } 

#contact{ padding: 44px 15px 44px 15px; text-align: center !important; } 

#logo{ margin-top: 55px; } 
.social-header{ top: 150px; left: 35%; } 
#main-menu{ margin-left:0;} 

}

/*****片剂肖像&景观*****/

@media所有 和（最小宽度：768px） 和（最大宽度：1,024）{

网状左{左：-280px重要; }

网格权{右：-360px重要;！ }

}

/*****肖像片剂*****/

@media只有屏幕 和（最小 - 设备宽度：768px） 和（最大值 - 装置 - 宽度：1,024） 和（方向：纵向）{

}

Answer 1

您应该使用Bootstrap为响应下发展，移动Web应用程序