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;
}

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

2 个答案: