所以我一直在尝试让网站同时适用于桌面和手机。但是，我对正在处理的东西感到困惑。
基本上我想做的是让它在桌面上看起来像这样:
和打电话的时候
但是发生的事情是，当我尝试在 Google Chrome 中解决这个问题时 - 我得到了这个结果:
在 Firefox 中执行时:
我们可以看到它在 Firefox 中实际上看起来还不错，但不太...
但是我不知道这是什么原因。我所做的是我使用一个 HTML 文件和一个 CSS 分开。我使用了@media 函数:
@media only screen and (max-width: 824px) {
.sidenav{
width: 100%;
height: auto;
position: absolute;
}
.main{
width: 100%;
padding:0 0 0 0;
margin-top: 50%;
}
div.gallery{
float: none;
display: inline;
width: 100%;
}
#pic2 {
padding:0px;
}
h2{
padding: 10% 0 0 20px;
}
}
这就是我将它连接到我的 HTML 的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidenav">
<img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas" style="width:100px;height:100px;">
<h1>Meny</h1>
<a href="#länk1">Länk 1</a>
<a href="#länk2">Länk 2</a>
<a href="#länk3">Länk 3</a>
<a href="#länk4">Länk 4</a>
</div>
我做错了什么？基本上我希望让它像前两张图片一样，其中桌面版本看起来像第一个版本，每当我调整到移动版本时它应该像图片编号 2...
还请!如果提供的代码太少或缺少其他内容，请随时发表评论。我会尽快回复!
fiddle :
最佳答案
发生的事情是由于菜单栏的绝对位置和 .main 100% margin-top。
为什么 margin-top: 100% (100% width of containing block) 不让 main class 的 div 在 sidenav class 的 div 下面？请检查这个问题 Margin-top: 100% gets parent width value... strange
这是我的 fiddle 。 请检查媒体查询中的主类。
当然只是为了让您了解问题并让事情“按原样”工作。
当然，如果是真实案例，我至少会让 javascript 计算以像素为单位的 margin-top 绝对值。这样，万一菜单以某种方式发生变化，您就不需要编辑您的 css。
https://jsfiddle.net/8up8yc4h/2/
@media only screen and (max-width: 824px) {
.sidenav{
width: 100%;
height: auto;
position: fixed;
}
.main{
width: 100%;
padding:0 0 0 0;
/*margin-top: 100%;*/
margin-top: 528px;
}
div.gallery{
float: none;
display: inline;
width: 100%;
}
#pic2 {
padding:0px;
}
h2{
padding: 10% 0 0 20px;
}
}
关于HTML、CSS 和媒体查询 - 在 Chrome 和 Firefox 上调整大小是不同的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50176370/