移动优先响应式设计



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

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

此外,现在它在纵向模式下看起来不错。假设我将为纵向创建一个 600px 宽度的断点和一个 1000px 的断点,仅此而已。然后我是否应该回到 319x480 并切换到横向并再次扩展站点并为横向模式找到新的断点?

你是如何有条不紊地做到这一点的?我认为这是一种非常酷的设计方式,我真的很想学习如何正确地做到这一点。

谢谢!

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

例:

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

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

一般来说,CSS 断点是水平的,因为响应式具有"流"布局。例如,如果您的网格布局包含 3 张照片并排,并且您的浏览器显示所有照片太窄,则应堆叠在一起,以便视图可以滚动浏览它们。

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

相关内容

  • 没有找到相关文章

最新更新