當屏幕變得更小時，元素會被壓扁

我正在使我的網頁響應，但努力保持網頁上的元素不會彼此超越。我對web開發很陌生，所以我甚至不知道如何解決這個問題。我真的很感謝在這個階段的一些一般性建議，以幫助我解決問題並向前邁進。當屏幕變得更小時，元素會被壓扁

2016-08-04 Max Visna

一些建議，讓你開始。

通過在文檔的頭部視meta標籤開始，這將停止智能手機和平板電腦從縮放你的頁面以適應視口（屏幕）

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<head>

使用CSS來定義元素的大小，因爲那時你可以在不同的視口重新設置元素。還要儘量避免包括任何元素的硬像素尺寸，因爲它們可能會導致小屏幕上的問題，選擇寬度超過960像素100％

有時您需要在小屏幕上更改佈局。例如，兩張並排圖像，每張寬度爲50％，可能無法在智能手機上使用。發生這種情況時，使用media queries更改佈局

CSS

img{ 
width:50%; 
height:auto; 
} 

@media screen and (max-width:400px) { 
img{ 
    width:100%; 
} 
}

希望這有助於讓你去！

更新

看看這是更接近你是什麼後（注意：佔位符圖像可能加載緩慢）：

實時取景 - http://s.codepen.io/panchroma/debug/ZOqgzx
編輯視圖 - http://codepen.io/panchroma/pen/ZOqgzx

重要的位是：

在你的HTML中，我已經刪除了你的圖像的內聯樣式，並將它從第65行開始移動到CSS
從CSS的第134行開始我已經爲窄視口構建了@media樣式。請注意，我已將您的2列布局摺疊爲單列布局。這個細節是完全可選的，但給你更多的工作空間
在你的HTML的第4行你有<link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" />。技術上這裏是沒有錯，但它更普遍使用的一個的style.css文件，包括在一個文件中的一切，和@media screen ...聲明和造型在style.css的文件

來源

2016-08-04 23:09:33

大衛你好，我真的很感激你的迴應。謝謝。我已經完全按照您在回覆中所寫的內容實施了html和css代碼，但不幸的是我的網頁上的情況保持穩定。我是否必須自定義視口元標記中的任何內容才能使其工作？就媒體查詢而言，我是否必須在HTML代碼的任何地方提及媒體查詢？先謝謝你，我真的很感謝你的幫助。 –

Hi @MaxVisna，視口元標記應該按照原樣工作，並且不需要在html代碼中提及媒體查詢，它只需要存在於CSS文件中。與CSS相關的佈局仍然不能按照狹隘的視口預期工作的最可能的原因是CSS。也許其他一些CSS樣式優先。使用Chrome網絡檢查器是解決此問題的最簡單方法。另外，你可以發佈一個鏈接到你的頁面，或者在http://codepen.io上開啓一個表明你的問題的筆嗎？ –

嗨大衛。這裏是我的頁面代碼所在的git集線器的鏈接。包括HTML和CSS。 https://gist.github.com/anonymous/f20c03aea884056919cf522914ac3ba3 –

當屏幕變得更小時，元素會被壓扁

回答

相關問題