在移动设备上查看固定页面布局
Viewing fixed page layout on mobile devices
我正在使用我网站的固定页面布局 (http://www.oatmeeel.com)。它在桌面浏览器上运行良好,但在移动设备上运行不佳。该网站已缩放以适合浏览器,但某些组件的格式发生了变化。请帮助?谢谢!
将所有固定宽度的容器转换为百分比。您无论如何都希望您的网站适合屏幕。所以,而不是使用
width: 1442.88px;
您正在使用的。将其隐藏到 100%。并且,为网站创建百分比布局(流体布局)。
如果需要,您可能还需要使用 "media queries" 重新排列元素。
寻找这两个词:
百分比布局(流体布局) & 媒体查询.
您即将开始解决您面临的问题。
不过,如果您需要任何细节,请告诉我。
这是我从头开始的大多数响应式网页设计项目中使用的粗略草稿:
<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>
< head > 中的 < meta name="viewport" .. > 行使您的响应式页面在移动设备上看起来正常。没有它,您的网站在移动设备上看起来会被缩小,文本会变得难以阅读。
我正在使用我网站的固定页面布局 (http://www.oatmeeel.com)。它在桌面浏览器上运行良好,但在移动设备上运行不佳。该网站已缩放以适合浏览器,但某些组件的格式发生了变化。请帮助?谢谢!
将所有固定宽度的容器转换为百分比。您无论如何都希望您的网站适合屏幕。所以,而不是使用
width: 1442.88px;
您正在使用的。将其隐藏到 100%。并且,为网站创建百分比布局(流体布局)。 如果需要,您可能还需要使用 "media queries" 重新排列元素。
寻找这两个词:
百分比布局(流体布局) & 媒体查询.
您即将开始解决您面临的问题。 不过,如果您需要任何细节,请告诉我。
这是我从头开始的大多数响应式网页设计项目中使用的粗略草稿:
<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>
< head > 中的 < meta name="viewport" .. > 行使您的响应式页面在移动设备上看起来正常。没有它,您的网站在移动设备上看起来会被缩小,文本会变得难以阅读。