移動平板電腦的響應式布局
[英]Responsive layout for mobile tablet
問題描述
我創建了一個電子商務頁面，並添加了@media以使頁面響應。 但是它不能正常工作，如果我的編碼風格錯誤，那么請再看看我在哪里做錯了，然后請糾正。 另外，我的圖像也沒有響應。
這是代碼
@media(min-width:1200px){ *{margin:0; padding:0;} #header{ width:100%; height:54px; background-color:#090; position:fixed; z-index:2; } #wrapper{ width:80%; background-color:#F7F4F4; margin:auto; } #category1{ width:100%; background-color:#FF6; } #category1::after{content:" "; display:block; clear:both; } #cat1_leftside{ width:20%; height:350px; background-color:#0FF; float:left; } #cat1_rightside{ width:80%; height:350px; background-color:#636; float:right; color: white; } #home_category1_boxes1{ width: 180px; position: absolute; display: inline; height: 350px; } #home_category1_boxes2{ width: 390px; position: absolute; display: inline; height: 350px; margin-left: 200px; } #home_category1_boxes3{ width: 390px; position: absolute; display: inline; height: 350px; margin-left: 577px; } #footer{ width:100%; height:100px; background-color:#2F2F2F; } } @media(min-width:768px) and (max-width:1199px){ *{margin:0; padding:0;} #header{ width:100%; height:54px; background-color:#090; position:fixed; z-index:2; } #wrapper{ width:80%; background-color:#F7F4F4; margin:auto; } #category1{ width:100%; background-color:#FF6; } #category1::after{content:" "; display:block; clear:both; } #cat1_leftside{ width:20%; height:350px; background-color:#0FF; float:left; } #cat1_rightside{ width:80%; height:350px; background-color:#636; float:right; color: white; } #home_category1_boxes1{ width: 180px; position: absolute; display: inline; height: 350px; } #home_category1_boxes2{ width: 390px; position: absolute; display: inline; height: 350px; margin-left: 200px; } #home_category1_boxes3{ width: 390px; position: absolute; display: inline; height: 350px; margin-left: 577px; } #footer{ width:100%; height:100px; background-color:#2F2F2F; } } @media(min-width:100px) and (max-width:767px){ *{margin:0; padding:0;} #header{ width:100%; height:54px; background-color:#090; position:fixed; z-index:2; } #wrapper{ width:80%; background-color:#F7F4F4; margin:auto; } #category1{ width:100%; background-color:#FF6; } #category1::after{content:" "; display:block; clear:both; } #cat1_leftside{ width:20%; height:350px; background-color:#0FF; } #cat1_rightside{ width:80%; height:350px; background-color:#636; color: white; } #home_category1_boxes1{ width: 180px; position: absolute; height: 350px; } #home_category1_boxes2{ width: 390px; position: absolute; height: 350px; margin-left: 200px; } #home_category1_boxes3{ width: 390px; position: absolute; height: 350px; margin-left: 577px; } #footer{ width:100%; height:100px; background-color:#2F2F2F; } }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resposive layout</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="header"> <h3> Header area </h3> </div> <br> <br> <br> <div id="wrapper"> <div id="category1"> <div id="cat1_leftside"><h3> Horizontal Slider Cat 1 </h3></div> <div id="cat1_rightside"><h3> </h3></div> <div id="home_category1_boxes1"> <ol><h3>Men Dress</h3> </ol> <ol>Men Dress 1</ol> <ol>Men Dress 2</ol> <ol>Men Dress 3</ol> <br> <ol><h3>Men Accessories</h3></ol> <ol>Men Accessories1</ol> <ol>Men Accessories2</ol> <ol>Men Accessories3</ol> </div> <div id="home_category1_boxes2"> <img src="images/boxes/cat1/big.jpg" width="376" height="350"></div> <div id="home_category1_boxes3"> <img src="images/boxes/cat1/box1.jpg" width="140px"/> <img src="images/boxes/cat1/box2.jpg" width="140px"/> <img src="images/boxes/cat1/box3.jpg" width="140px"/> <img src="images/boxes/cat1/box4.jpg" width="140px"/> </div> </div> <br> <div id="footer"> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 2017-03-26 11:50:53
編輯問題和評論后：
首先是一般性評論（來自我的原始答案）：
通常的方法是先定義適用於所有大小的通用規則，然后（在其下方）定義媒體查詢中的規則，這些規則將覆蓋一些通用規則。
可以使用移動優先方式（通用規則適用於移動尺寸，然后被桌面規則部分覆蓋）或桌面優先方法（台式機通用規則，其中一些適用於移動設備）來完成大小）。 我不會創建三套完全不同的規則-太多了...
現在，關於您的代碼：有很多事情我需要更改，但是我不會為您重新創建整個頁面，因此這里僅是一句話，並回答您的最后評論：
在移動CSS中，您具有以下規則：
#home_category1_boxes3{
width: 390px; position: absolute; height: 350px; margin-left: 577px;
}
這意味着將一個390px寬的容器放置在距離其容器/窗口左邊界577px處，即，其右邊界將是距離容器左邊界967px的位置。 但這是一個規則集的內部，該規則集僅適用於寬度小於768像素的屏幕，因此將其從容器中推出200像素-這根本行不通。 因此，首先，更改該邊距設置。
實際上，您不應該在這些.home_category1_boxes容器上使用position: absolute －在這種情況下，它們使它們重疊且無響應。 只需刪除它，然后嘗試創建規則的容器和元素流即可。
bootstrap 3 div在手機和平板電腦上沒有響應，並且太小
[英]bootstrap 3 div is not responsive in mobile and tablet and are too small
HTML響應式電子郵件：台式機/平板電腦的3列布局到電話的2列布局
[英]HTML Responsive Email: 3 column layout for desktop/tablet to 2 column layout for phone
如何將 2 列布局更改為平板電腦和移動設備的選項卡式布局
[英]How can I change 2 column layout to a tabbed layout for tablet and mobile
如何在移動設備和平板電腦設備上使導航菜單響應為兩行？
[英]How to make navigation menu responsive as two rows on mobile and tablet devices?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.