在移動設備上查看邊距問題

Question

我已更正所有的網頁，以便在移動設備（iphone）中查看時看起來不錯，但我有一頁效果不佳。

這是我正在修復的頁面，以便圖像呈現更好。 http://www.jobspark.ca/read-me/

下面是一張屏幕截圖，演示如何在頁面縮小尺寸時推送圖像。展望與CSS

Answer 1

解決這個問題，我認爲你應該使用媒體查詢，或在一定的‘斷點’改變你的元素的風格響應的框架。短期的解決方案，將是這樣的，以你的CSS文件：

@media only screen and (max-width: 767px) { 
img { width:100%; height:auto; clear:both; } 
} 

這意味着，當你的網頁在窗口小於767px的寬度看，IMG將全部顯示在一行本身，其寬度將擴大佔據整個容器。如果您的圖片在div內（在div內），這將無法正常工作。

爲了將來的參考，請查看媒體查詢和基於響應式網格的框架，他們會爲您做所有的繁重工作。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries?redirectlocale=en-US&redirectslug=CSS%2FMedia_queries

框架： 骨架：http://getskeleton.com/ Unsemantic：http://unsemantic.com/