html - 我需要帮助才能在较小的设备上创建特定的内容 View

Question

friend 们，你们好!

拜托，我需要有关如何在“视口(viewport):320 x 568px”的移动设备上实现特定 View 或显示的指南或说明； Here's the screen view of the UI Bug on the aforementioned viewport.

使用我的浏览器(Chrome 浏览器)检查代码元素后，我发现了以下代码:

<div class="col-sm-1" style="margin-top:30px;">

<span style="height: 200px;
                            border-right: 1px solid #ccc;
                            padding-bottom: 157px;"></span>
<br>
<p style="    padding-top: 171px;
                            margin-left: -6px;">OR</p>
<br>
<span style="height: 200px;
                            border-right: 1px solid #ccc;
                            padding-bottom: 157px;"></span>

然后我对上面的代码做了一些调整，因此，我想出了这个:

<div class="col-sm-1" style="margin-top:30px;">

<span style="
                            height: 20px;
                            border-right: 2px solid #ccc;
                            padding-right: 100px;
                            " class=""></span>
<br>
<p style="
                            margin-left: 91px;
                            ">OR</p>
<span style="
                            height: 20px;
                            border-right: 2px solid #ccc;
                            padding-right: 100px;
                        "></span>

然后在微调和调整之后，I achieved this result thereafter

现在，我的全部挑战是将所有这些调整纳入网站样式表中“@media screen and (max-width: 480px)”的视口(viewport)。问题是整个调整是在 html 页面上完成的，如果我直接在那里编辑它并更新我提出的内容，它将影响其他视口(viewport)，这对我来说将是一个大问题。

那么，我的好 friend 们，如何在不改变其他视口(viewport)的情况下将调整应用于样式表中的所述视口(viewport)？

我将等待您精彩的回复。

谢谢

Answer 1

好吧，这是我的解决方案，经过多次破解我的头盖骨后我的解决方案。

我移至 HTML 页面，并像这样编辑负责该内容的代码或标签:

<div class="col-sm-1 text-center">

    <span style="height: 20px;
    border-right: 2px solid #ccc;
    padding-bottom: 12px;"></span>
    <p style="    padding-top: 15px;
    margin-left: -6px;">OR</p>
    <span style="height: 20px;
    border-right: 2px solid #ccc;
    padding-bottom: 12px;"></span>
</div>

然后在 CSS 文件中，我只是向 @media (min-width: 768px) 添加了一个 padding-top:200px 属性，以避免在宽度小于 768px 的小屏幕上出现失真。所以在我的 CSS 文件中，我只是寻找 min-width: 768px with col-sm-1 元素，它当然在 CSS 文件中并且只添加了 padding 属性，即:

.col-sm-1 {
    width: 8.333333333333332%;
    padding-top:    200px;
}

瞧!这解决了我的挑战，大家又开心了。