如何解决如何将网页宽度以像素为单位缩放到任何屏幕尺寸?
| 我正在尝试创建固定宽度(970 px)的网站,并希望确保将其调整为任何潜在的用户屏幕尺寸,但是浏览器会继续显示该屏幕,但不会显示我的整体屏幕宽度。解决方法
如果您要使页面跨度为宽度的100%,请查看以下文章:
液体布局
如果您尝试将固定宽度的内容放在任何页面宽度上,请使用:
margin: 0px auto;
, 您所追求的并不是液体布局,而是一种“弹性”布局,并附加了一个“自动拉伸”脚本。
有一些步骤可以使它起作用:
使用ems作为尺寸(而不是像素尺寸)来创建布局。这样可以使布局“可缩放”,同时保持其比例正确。
将缩放值以百分比形式应用于您的ѭ1as元素。此默认设置很有用,因为它在几乎所有浏览器中都将1em设置为等于10px:
body {font-size:62.5%;}
这意味着您的布局的宽度为97em
。
使用javascript来检测用户页面的宽度,并调整主体上的缩放值以更改\'zoom \'以适合页面。您可能希望它在页面加载时至少运行一次,并且可能在浏览器调整大小时至少运行一次。
这是弹性布局的一个很好的起点:http://www.alistapart.com/articles/elastic
, 您不应该设置宽度。默认情况下,页面内容将展开以覆盖整个屏幕。
如果需要查找元素的实际宽度,则始终可以找到。如果您使用的是jQuery,
var width = $(\"#my-element\").width()
, 如果了解您的意思,听起来好像您设置的边距设置不正确。
要使内容居中,您将希望代码看起来像这样:http://jsbin.com/uyolo4/4/edit
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。