在移动设备上查看边距问题

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/