所以我正在开发我的第一个响应式网站,该网站广泛使用媒体查询.我想知道是否有一些我应该优化的常见页面宽度.
我可能会有一个最大宽度(没有完全流畅)我想我可能有3-5个设置宽度,它们之间有趣的小CSS3过渡(类似于CSS Tricks的工作方式).
目前我使用的数字有些随意:
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
另外,我想我已经读过一些移动设备没有按预期运行(有@media).这在哪里发挥作用,我应该如何处理这些情况？
我想知道 css 网格如何利用最大宽度。以旧方式，您将使用带有设置边距的包装类的容器。
使用 CSS 网格，根据您创建它们的方式，您不再需要使用容器，有时您无处可添加。
我希望标题为全宽，但我希望其中的导航最大宽度为屏幕分辨率的 80% 并自动设置边距，此代码类似于使用包装容器完成此操作的方式。问题是，我如何对 side 和 main 做同样的事情，因为它们不在父级内部来设置最大宽度？
body {
display: grid;
grid-template-areas:
"header header"
"aside main";
grid-template-columns: 275px 1fr;
grid-template-rows: 1fr 1fr;
}
header {
grid-area: header;
border: solid 1px black;
}
header > nav {
max-width: 80%;
margin: auto;
border: solid 1px blue;
}
aside {
grid-area: aside;
}
main {
grid-area: main;
}
HTML
<html>
<body>
<header>
<nav>nav</nav>
</header>
<aside>aside</aside>
<main>main</main>
</body>
</html>
如果我必须将它们包裹在容器内，这将如何影响网格？如果我在 html 或 body 标签上设置最大宽度，那么我将如何获得一个延伸浏览器整个宽度的标题？