尝试对响应式 CSS 使用百分比

Question

我在http://www.flywavez.com/ 启动了这个网站，并且大部分都位于（我必须在这里甚至增加几个边距一个像素，那里一个像素），但我去在 iPhone、Android 上检查它（galaxy s3 正在运行4.3、Chrome 和 android 浏览器）、iPad 和 Kindle，我不认为我的 CSS 边距被解释为它们在屏幕浏览器（即台式机和笔记本电脑）中的样子。

我在边距上使用了百分比，甚至尝试了填充，但我找不到元素显示相对均匀的平衡。我应该为具有不同边距的移动设备指定单独的样式表吗？对于手机，似乎 .socials（一个精灵，顺便说一句）的左边距为 0，顶部有一些可以将其降低一些。

#quick-mid-text 也是如此，在单独的手机浏览器上，边距将保留为 0。

但是，我希望尽可能多地将其保留在一个样式表中。我应该使用什么作为边距或元素排列，以使社交媒体图标在播放器下方居中，并使#quick-mid-text 中的段落与播放器的左边缘齐平？

这是我的 CSS：

.socials {
float: right;
padding-top: 13px;
margin-right: 40%;
width:275px;
}

.socials a {
display: block;
width: 58px;
height: 50px;
float: left;
background: url(../images/socials2.png) 0 0 no-repeat; 
}

.socials a:hover {
opacity: 0.5;
}

.socials a+a {
margin-left: 12px;
background-position: -62px 0;
width: 56px;
}

.socials a+a+a {
margin-left: 4px;
background-position: -120px;
width: 32px;
}

.socials a+a+a+a {
margin-left: 4px;
background-position: -156px; 
width: 93px;
}

Answer 1

我建议您使用媒体查询来根据屏幕宽度更改样式。您可以创建基本样式，然后在您的媒体查询中覆盖它们等。

例如：

.socials {
  float: right;
  padding-top: 13px;
  margin-right: 40%;
  width:275px;
}

@media only screen and (max-width: 979px) {
    .socials {
      margin-right: 10px;
    }
}

Answer 2

请试试这个 css...

#quick-mid-text {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 13px;
    width: 42%;
}
.socials {    /* style.css -line no.756*/
    float: none;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 13px;
    padding-top: 0;
    width: 260px;
}