[英]HTML, CSS & Media-queries - resizing on Chrome and firefox is different
因此，我一直在努力使網站同時適用於台式機和手機。 但是，我正在困惑的工作。
基本上我想做的是使它在台式機中看起來像這樣：
以及在通話時
但是，正在發生的事情是，當我嘗試在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 ...
也請！ 如果提供的代碼太少或缺少其他內容，請隨時發表評論。 我會迅速回應！
小提琴：
嘗試將其添加到您的Head標簽
<meta name="viewport" content="width=device-width, initial-scale=1">
告訴瀏覽器使用設備的寬度。
編輯
也可以嘗試使用此Media查詢來刪除絕對/固定位置以及邊距。
body { font-family: "Lato", sans-serif; } h1 { color: white; text-align: center; } h2{ color: black; font-size: 50px; text-align: left; padding-right: 20px; } .sidenav { text-align: center; height: 100%; width: 15%; /* position: fixed; */ top: 0; left: 0; background-color: black; padding-top: 100px; } .sidenav a { text-decoration: none; font-size: 15px; text-align: center; color: #818181; display: block; border: 10px solid black; background-color: white; border-radius: 25px; padding: 12px; } .sidenav a:hover { color: #f1f1f1; } .main { padding-left: 15%; } div.gallery { margin: 5px; float: left; width: 28.3%; display: inline; } div.gallery img { width: 100%; height: auto; border-radius: 35px; } div.desc { font-size: 15px; font-family: "Times New Roman", Times, serif; padding: 15px; text-align: left; } #pic2{ padding: 0px 70px 0 70px; } .text{ float: left; font-size: 17px; position: relative; } .clearfix { overflow: auto; } .img2 { float: right; width: 30%; height: 30%; padding: 10px 20px 10px 20px; border-radius: 35px; } footer { text-align: center; font-style: italic; font-family: Impact, Charcoal, sans-serif; } @media only screen and (max-width: 824px) { .sidenav{ width: 100%; height: auto; /* position: absolute; */ } .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; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <title>Inl. 6 - Barry</title><!-- Titel av HTML, Kan även synas på TAB i Google chrome etc.--> </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> <div class="main"> <h2>Innehåll</h2> <div class="gallery"> <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas"> </a> <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div class="gallery" id="pic2"> <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas"> </a> <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div class="gallery"> <a><img src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas"> </a> <div class="desc">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div class="text"> <hr> <div class="clearfix"> <img class="img2" src="https://vectortoons.com/wp-content/uploads/2017/05/basketball-emoji-collection-1-002.jpg" alt="Fotot kunde inte hittas"> <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p> <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</p> <p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</p> <p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <hr> <footer> <p>Skriven i HTML5</p> </footer> </div> </div> </body> </html>
發生這種情況是由於菜單欄的絕對位置和.main 100％margin-top。
為什么要讓margin-top：100％（包含塊的100％寬度）絕對不讓sidenav class的div下的main class的div？請檢查此問題Margin-top：100％獲取父級的寬度值。 ..奇怪
這是我的小提琴。 請在您的媒體查詢中檢查主類。
當然，這只是為了讓您了解問題並使事情“按原樣”進行。
當然，這是一個真實的案例，我至少會讓javascript計算以像素為單位的邊距最高絕對值。 這樣，萬一菜單發生更改，您就無需編輯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;
}
}
為什么Google Chrome瀏覽器會影響我的CSS @ media-queries？
[英]Why Google Chrome is a affecting to my CSS @media-queries?
CSS Media查詢可在Chrome中使用，但不適用於Firefox或Safari瀏覽器
[英]CSS Media queries works in Chrome but not firefox or safari
修改不同屏幕的HTML結構的最佳方法（可能是通過媒體查詢）
[英]Best way to modify HTML structure for different screens (possibly with media-queries)
連續有聚合物的靈活定制元素，可用於不同的設備（使用媒體查詢）
[英]Flexible customelements with Polymer in a row for different devices ( using media-queries )
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.