如何使網站的內容正文響應

我有一個網站，我試圖做出反應，當我申請@media only screen and (min-width: 180px) and (max-width: 267px)時，內容區域被切斷在右側。以下是我正在應用到頁面的CSS。請問我做錯了什麼？如何使網站的內容正文響應

謝謝。

的

CSS

.content_body{ 
margin: 0 auto; 
width: 100%; 
overflow: hidden; 
padding-top: 30px; 
background: #C9C7BB; 
color: #555; 
font-family: Tahoma, Arial, sans-serif; 
font-size: 14px; 
min-height: 200px; 
} 

.bio_wrapper{ 
line-height: 25px; 
padding: 20px 0px 500px 50px; 
} 

.bio_left{ 
width: 800px; 
float: left; 
font-family: lato; 
color: black; 
} 

.bio_images{ 
margin: 0; 
margin-top: 30px; 
margin-bottom: 90px; 
} 

.bio_images li{ 
padding-right: 35px; 
display: inline; 
list-style-type: none; 
} 

.bio_images li:last{ 
    padding-right: none; 
} 

.bio_images img{ 
border: 4px solid #999966; 
border-radius: 5px; 
} 

.bio_mainimage{ 
float:right; 
width: 20%; 
} 

    @media only screen and (min-width: 180px) and (max-width: 267px) { 

.bio_mainimage{ 
    display: none; 
    } 

.content_body{ 
margin: 0 auto; 
width: 50%; 
overflow: hidden; 
padding-top: 30px; 
background: #C9C7BB; 
color: #555; 
font-family: Tahoma, Arial, sans-serif; 
font-size: 14px; 
min-height: 200px; 
} 

.bio_images img{ 
display: block; 
} 
}

Sample Page

來源

2013-01-13 user1843335

這是[jsfiddle]（http://jsfiddle.net/dotman14/R4n7B/）示例 – user1843335

我剛剛檢查了一些東西，看起來你有一個非常大的'.bio_left' –

.bio_left具有800像素的絕對寬度。由於.content_body的溢出設置爲隱藏狀態，並且其寬度爲100％，所以內容會被截斷。

顯示在頁面底部的bios.png圖像將更適合作爲背景圖像。它沒有提供任何內容，只是在一個狹窄的設備上看起來很奇怪（並且不，給它display: none以將它從狹窄的設備中隱藏起來並不是一種「刪除」它的好方法）。

這種佈局真的會受益於首先針對窄設備進行樣式設計，然後在檢查更寬設備的媒體查詢中隱藏所有浮點數，絕對寬度和奇數頁邊距。

此外，媒體查詢不需要最小寬度和最大寬度。你可以指定最大寬度。我不認爲有任何設備的寬度小於180像素。

來源

2013-01-13 13:10:49 cimmanon

感謝您的回覆。那麼您是否建議隱藏我不想在小屏幕上顯示的元素？ – user1843335

使用'display：none'隱藏文本元素沒有問題，這只是圖像嵌入元素的一個問題。即使用戶不可見，圖像仍將被加載。如果使用背景，則可以通過媒體查詢設置或不設置適合佈局的背景（如果未設置，則不會下載）。 – cimmanon

您能否提供一個簡單的例子來說明你在說什麼？謝謝。 – user1843335

如何使網站的內容正文響應

回答

相關問題