如何在台式机、平板电脑和移动设备上获得相同的显示效果

Question

我正在为我从另一个开发人员那里继承的客户构建一个网页。 link 是：http://up8.431.myftpupload.com/。客户希望 phone 号码和顶部栏中的社交图标在所有 devices:desktop、平板电脑和移动设备上以相同的样式显示。她不喜欢当显示屏变得足够小时，phone 数字和社交图标如何堆叠在一起。这很好，但如果没有空间可以左右显示它们，但如果有的话，她希望保持相同的样式。问题是，我不知道如何做到这一点。

检查元素后，我注意到每个块的宽度为 auto，或者它需要适合的任何宽度。我尝试给每个块一个 display:inline 规则，希望它们能接受在内容宽度上并从左到右对齐，然后我就可以将社交图标向右浮动。

试过这样的事情：

#top-bar-content, #top-bar-social
{
display:inline;
}

和

.top-bar-left, #top-bar-right
{
display:inline;
}

我希望发生的是两个块都将内联显示，背靠背，我可以分别将它们左右浮动。实际发生的是 phone 数字改变了它的宽度以适应内容，并完全按照我想要的方式向左浮动。然而，社交障碍却没有。它失去了它的尺寸；检查元素后，我发现它的宽度和高度为 0x0。它留在同一个地方。就像我说的，在我的脑海里，我希望它采用它的内容宽度并紧挨着 phone 数字。

我确定这只是一个菜鸟错误，我只是没有看到我面前的东西。我非常感谢提前提供的任何帮助。

Answer 1

我会将同时包含数字和社交图标的父 div 更改为 display:flex。然后将 justify-content:space-evenly 或 space-around 或 space-between （在它们之间进行实验）添加到同一个父元素中。

因此您将不得不使用媒体查询将其仅应用于移动设备。当它应用于桌面设备时，会受到其他类和“::after”伪代码的干扰。

#top-bar-inner {
    position: relative;
    display: flex;
    justify-content: space-evenly;
}

这样就可以了

如何在台式机、平板电脑和移动设备上获得相同的显示效果

How to get the same display on desktop, tablet, and mobile

css

wordpress

display