iphone - 在移动设备中查看时的边距问题

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/ 非语义：http ://unsemantic.com/