【发布时间】：2014-05-22 22:42:08
【问题描述】：
我们正在从我们的一个网站（具有全宽内容）中提取代码，并尝试在另一个网站上使用类似的媒体查询，该网站的内容包括空白侧边栏。主要问题是在移动视图中，我们的页面维护了这些侧边栏并将所有内容压缩成一个瘦列。该页面右侧有一个表单，左侧是图像，上方是徽标，下方是公司徽标，下方是公司徽标。
关于我应该使用哪一部分来填充移动设备的整个宽度有什么建议吗？此外，我们正在 HubSpot 的 COS 中操作这些属性。
这是我们要拉的：
<style>
@media (max-width: 768px) {
.testimonials {margin-top:500px;}
.row-fluid-wrapper.row-depth-3.row-number-3 {background: #FFFFFF;}
}
.inner-form{
margin-left: 68% !important;
max-width: 300px;
margin-top: 20px;
position: relative;
z-index: 2;
}
.outer-form{
height: 345px;
}
.needs-background{
background: url(http://cdn2.hubspot.net/hub/362750/file-830706138-png/quote_us_medicare/pic.png) no-repeat; padding-bottom:100px;
}
@media(max-width:767px){
.needs-background{
background:initial !important;
}
.inner-form{
margin: 0 auto !important;
height: initial;
margin-top: initial;
}
}
#hs_cos_wrapper_module_1396381482147112 input[type="submit"] {
font-size: 16px !important;
display: inline-block !important;
color: #ffffff !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: 15px !important;
margin-top: 15px !important;
padding-right: 35px !important;
margin-left: 2px !important;
padding-bottom: 12px !important;
padding-top: 12px !important;
font-weight: bold !important;
line-height: 30px !important;
border:2px solid;
border-radius:10px;
border-color: #D1D1D1;
}
@media(min-width:768px){
.small-screen-image{
display:none !important;
}
}
</style>
【问题讨论】：
-
您能提供一个链接以便我们查看 HTML 吗？从外部开始，逐步进入。检查任何边距、填充和宽度值使用相对值，如 Ems 而不是 Px，以便浏览器可以干净地计算比例。另外，为什么你的媒体查询只针对 1px 的宽度（768px）？