移动优先响应式设计[关闭]答案

【问题标题】：Mobile first responsive design [closed]移动优先响应式设计[关闭]
【发布时间】：2017-04-06 22:23:21
【问题描述】：

我目前正在重做我的 css 和其他使我的自适应网站具有响应性所需的东西 - 直到现在我为我的笔记本电脑设计了我的网站，然后按比例缩小，现在我从另一边做。

我已经设法让网站在 319x480 中看起来不错，现在我要看看在哪里设置我的第一个断点：你到底是怎么做的？我应该只水平调整窗口大小并查看需要休息的地方，还是应该垂直调整？从我看到的教程中，他们总是在水平地谈论，但是你不是错过了一些东西吗？

此外，现在它在纵向模式下看起来不错。假设我将在 600 像素宽度处为纵向设置断点，在 1000 像素处设置断点，仅此而已。然后我应该回到 319x480 并翻转到横向并再次扩展站点并为横向模式找到新的断点吗？

您如何有条不紊地处理这件事？我认为这是一种非常酷的设计方式，我真的很想学习如何正确地做到这一点。

谢谢！

【问题讨论】：

欢迎来到 SO 请阅读 How to Ask、"What topics can I ask about here?" 和 "What types of questions should I avoid asking?"。您的问题在这里非常广泛。
不用担心垂直。您多久不必在桌面上滚动一次？在较小的屏幕上不经常，几乎从不。专注于水平，按照你说的做，调整大小，看看哪些点需要调整。纵向与横向与水平调整浏览器大小的区别相同。有些使用通用的智能手机、桌面和桌面断点，但不是必需的。即使使用这些常规断点，您仍然会发现需要调整的点。
最佳自我引导
感谢大家的意见，我一定会在这里节省一些时间

标签： html css mobile responsive-design

【解决方案1】：

如果您首先使用移动设备，则希望使用最小宽度媒体查询。桌面首先使用最大宽度。像您问的那样专注于宽度而不是垂直高度，如果调整浏览器窗口高度的大小，通常使用滚动条就可以了。您不希望人们通常必须水平滚动。

例子：

.header-title {
    font-size: 14px;
}

@media screen and (min-width: 600px) {
    .header-title {
        font-size: 16px;
    }
}

@media screen and (min-width: 1024px) {
    .header-title {
        font-size: 18px;
    }
}

【讨论】：

【解决方案2】：

您可以在浏览器控制台中检查的所有主要断点。在这里您可以看到，通常只有宽度发生变化。可能，垂直调整大小不会对您的页面产生太大影响

【讨论】：

【解决方案3】：

通常 CSS 断点是水平的，因为响应式具有“流”布局。例如，如果您的网格布局包含 3 张并排的照片，而您的浏览器显示所有这些照片太窄，则应该将它们堆叠在一起，以便视图可以滚动浏览它们。

以多种尺寸和纵横比测试您的网站始终是一个好主意，尤其是在您使用固定/绝对位置或计算高度时。

【讨论】：