我有我正在处理的网页。关于它的一切都在响应能力方面正常工作，但是，只有页脚不能正常工作。当屏幕变小时，我希望页脚的 3 个部分显示在彼此下方。非常感谢这里的任何帮助。在下面查看我的代码:
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Papia</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--- This is the path to the image that will display on mobile --->
<video poster="assets/backupimage.jpg" id="bgvid" playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/papia.webm">
<source src="assets/papia.mp4">
<source src="assets/papia.mov">
</video>
<div id="topLeft">
<img src="assets/papia-logo-secondary.svg">
</div>
<div id="topRight">
<a href="http://www.google.com" target="_blank">Find a table</a>
</div>
<div id="logo">
<img src="assets/papia-logo-main.svg">
</div>
<div id="left">
<p>4:30pm - close (kitchen closes at 11pm)</p>
</div>
<div id="centre">
<a href="" target="_blank">Facebook</a>
<a href="" target="_blank">Instagram</a>
<a href="" target="_blank">Twitter</a>
</div>
<div id="right">
<p>64 Welfare Road, Cole Bay, Sint Maarten</p>
</div>
<!---
This is an option button that will pause the video background
<div>
<button>Pause</button>
</div>
--->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#left{
position: absolute;
float: left;
bottom: 0;
left: 20px;
color: white;
}
#centre{
position: absolute;
float: left;
margin-left: 40%;
bottom: 10px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
margin-left: 78%;
bottom: 0;
color: white;
}
@media screen and (max-width: 500px) {
div{display: block}
}
@media screen and (max-device-width: 800px) {
html { background: url(assets/backupimage.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
div{display: block}
}
最佳答案
我同意 hungstar 的评论 - 绝对定位会使您的网页响应变得不必要地困难。话虽如此，这是可以做到的。您已经在 CSS 中使用了 @media screen 和 (max-width: 500px) 语法，但并未充分发挥其功能。在标记为 max-width: 500px 部分的部分内，您有机会为小于 500px 的浏览器窗口完全重新定义您的 css。在这些括号内，您只需重新定义 3 个 div 的 CSS。
@media screen and (max-width: 500px){
#left{
position: absolute;
float: left;
bottom: 200px;
left: 20px;
color: white;
}
#centre{
position: absolute;
left: 20px;
float: left;
bottom: 100px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
left: 20px;
bottom: 0;
color: white;
}
}
所以这将检查屏幕的宽度，当它变得小于 500px 时，将应用此 CSS，并且你的 3 个 div 将一直重新定位到左侧，彼此堆叠(我编了它们的任意位置(距离底部 100 和 200 像素)。您还需要为 800 像素大小的屏幕重新定义所有这些
关于html - 为什么我的页脚不能重新调整以适应较小的屏幕尺寸？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40494703/