我的页脚遍布我的网页底部。如果用户正在桌面上查看页面，则页脚必须position:fixed;位于屏幕底部。但是，根据我的UX规范，在电话或其他小屏幕（宽度小于768像素）上查看时，页脚必须为
可以在CSS内完成吗？如果是这样，怎么办？还是我需要依靠Javascript？假设该页面当前未使用任何Javascript。
首先，如果用户在大于768像素的屏幕上浏览网站，则需要始终固定页脚；
这可以通过使用媒体查询来实现，该媒体查询可以检测屏幕宽度并将固定位置应用于页脚，如下所示：
@media(min-width: 768px) {
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
要解决移动问题，您需要应用我们所说的“粘性页脚”。可以使用以下方法轻松完成此操作flexbox
考虑以下标记：
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
CSS将是（您可能需要在属性前面加上前缀）
@media(max-width: 768px) {
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1 auto 0;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句