Question

我已经更正了我的所有网页，以便在移动设备（iphone）中查看时看起来不错，但我有一页效果不佳。

这是我要修复的页面，以便更好地呈现图像。 http://www.jobspark.ca/read-me/

以下是一个屏幕截图，演示了在调整页面大小时如何推送图像。希望用CSS修复此问题

enter image description here

Answer 1

我认为您应该使用媒体查询，或者在某个“断点”处改变元素样式的响应式框架。短期解决方案，将这样的内容添加到您的CSS文件中：

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

这意味着当您在宽度小于767px的窗口中查看页面时，img将单独显示在一行上，并且其宽度将展开以占据整个容器。如果你的图像在div中（在div中），这将不起作用。

为了将来参考，请查看媒体查询和基于网格的响应式框架，他们将为您完成所有繁重的任务。