在移动设备上查看固定页面布局

时间:2015-08-22 10:11:14

标签: html css fixed-width page-layout

我正在使用我网站的固定页面布局(http://www.oatmeeel.com)。它适用于桌面浏览器,但不适用于移动设备。该网站已缩放以适合浏览器,但某些组件的格式会发生变化。请帮忙?谢谢!

2 个答案:

答案 0 :(得分:1)

将所有修复宽度容器转换为百分比。无论如何,你希望你的网站适合屏幕。所以,而不是使用

width: 1442.88px;
你正在使用的

。将此转换为100%。此外,为网站创建百分比布局(流畅布局)。 如果需要,您可能还需要使用“媒体查询”重新排列元素。

寻找这两个术语:

百分比布局(流畅布局) & 媒体查询

您将自行解决您遇到的问题。 如果你想要任何细节,请告诉我。

答案 1 :(得分:0)

这是我在大多数响应式网页设计项目中使用的粗略草稿,我从头开始:

<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<style>
body { margin: 0; padding: 0; }
@media (min-width: 728px) and (max-width: 1150px) {
/* enter large tablet style overrides here */
}
@media (min-width: 420px) and (max-width: 727px) {
/* enter medium tablet and large phone style overrides here */
}
@media (min-width: 1px) and (max-width: 419px) {
/* enter small devices and phone style overrides here */
</style>
</head>

<body>
Website body here
</body>

</html>

&lt; meta name =“viewport”..&gt;在<&头&gt;使您的自适应页面在移动设备上显示正常。没有它,您的网站看起来在移动设备上缩小了,文字难以阅读。