如何使我的网站对移动设备更敏感？

Posted 2023-03-21

【中文标题】如何使我的网站对移动设备更敏感？

【英文标题】：How can I make my website more responsive to mobile?

【发布时间】：2022-01-11 01:53:08

【问题描述】：

我已经创建了我的在线作品集，它在桌面上运行良好。但是，每当我在其他设备/智能手机上尝试它时，它就不再响应了。我的代码上有元标记，我的 css 上还有一个媒体查询。我正在使用引导程序和外部 css 对其进行编码。另外，我遇​​到的另一个问题是移动设备上的水平滚动。

附言。删除了一些关于文本的重要信息。

这是我遇到问题的代码。

<div class="container">
    <h2 class="text-center p-3">PROJECTS</h2>
    <div class="row">
        <div class="col-md-7 text-center">
            <h5 class="educare">Title</h5>
            <p class="text-justify py-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <p class="text-center py-1 tech-stack">
                Tech Stack:
                <img src="https://img.icons8.com/doodle/48/000000/squarespace.png"/>
                <img src="https://img.icons8.com/ios-filled/50/000000/html.png"/>
                <img src="https://img.icons8.com/ios-filled/50/000000/css.png"/>
            </p>
        </div>
        <div class="col-md-1 text-left order-md-last order-sm-first">
            <img src="..." class="educ-image">
        </div>
    </div>
    <div class="row">
        <img src="./images/venture.gif" class="mr-auto venture-gif">
        <div class="col-md-7 text-center">
            <h5 class="venture-txt">Venture Capital Funds Website</h5>
            <p class="text-justify py-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <p class="text-center py-1 tech-stack">
                Tech Stack:
                <img src="https://img.icons8.com/windows/32/000000/wix.png"/>
                <img src="https://img.icons8.com/ios-filled/50/000000/adobe-photoshop--v1.png"/>
                <img src="https://img.icons8.com/ios-filled/50/000000/adobe-illustrator.png"/>
            </p>
        </div>
    </div>
</div>

【问题讨论】：

到底是什么问题？它在浏览器响应视图中看起来很好，一直到 320 像素宽（iPhone 5）。

【参考方案1】：

您的移动滚动问题应该是由（元素占用超过设备宽度）引起的..

-检查移动版本中的元素宽度并确保它们在某些媒体查询中采用 100% 的宽度..

【讨论】：

我的媒体查询的最大宽度是 768px。我应该把它改成更大还是更小？