我想创建一些HTML页面,这些页面将显示在不同的移动设备上。我希望它们能够自动调整到不同的移动屏幕尺寸。
HTML页面包括文本和图像。图像可能大于600x450,但如果移动屏幕(例如)280x320,则图像应自动调整其大小以适应。
我该怎么做?
答案 0 :(得分:12)
如果你所谈论的页面只包含文字和图片,那么我认为你需要在每个HTML页面中做的就是:
在<head>
代码中添加此viewport meta tag:
<meta name="viewport" content="width=device-width">
这应该使页面呈现合理的大小。
在<style>
代码中添加此<head>
代码:
<style>
img {
max-width: 100%;
}
</style>
我认为这将确保所有图片都不会比应用程序的webview视口更宽。
(如果这不起作用,请尝试使用width: 100%;
。这肯定会使所有图像都与视口一样宽,因此不会更宽。)
然而,你的问题有点过于笼统:我们最终可能会写一本涵盖所有可能性的书。你能否更具体地说明你实际工作的代码?
答案 1 :(得分:3)
这种技术被称为流动或自适应布局,有一个很好的介绍here
答案 2 :(得分:1)
媒体查询是您做任何事情的最佳方式。
像往常一样设置html和样式表,但在CSS文档的末尾使用类似于下面代码的内容。 您需要针对不同的设备宽度和布局计算出不同的查询,但这应该可以帮助您入门。
/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
/* Your adjusted CSS goes here */
}
/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
/* Your adjusted CSS goes here */
}
答案 3 :(得分:0)
这里有很多选择,在一个问题中谈得最详细。
没有“自动”方式 - 必须手动编码。我能想到的三个选项,需要更多调查:
答案 4 :(得分:0)
您可以使用媒体查询来使您的布局响应,意味着修复所有屏幕小,中,大。
有关详情,请访问本教程 - learn responsive design in easy steps