Question

我有以下HTML文档的结构：

<body>

<div class="main">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
<div>

</body>

是否可以为main，left，center和right定义不同的宽度，具体取决于屏幕调整。例如，如果屏幕结果为1280或更高，则主宽度应为1140px。如果是1280或更低，宽度应该是960px？感谢。

PS。我知道我们可以用％来定义宽度，但我很想知道我们是否可以定义2个不同的固定宽度。

Answer 1

仅使用CSS，您可以使用媒体查询。 Here's the spec和some examples。请注意，并非所有浏览器都支持此功能。

Answer 2

为此使用JavaScript。 Jquery可以提供更好的语法。使用screen.width获取用户屏幕的宽度，然后相应地调整内容大小。

Answer 3

这是您可以用来检查屏幕宽度和高度的JavaScript。

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

参考.. http://andylangton.co.uk/articles/javascript/browser-screen-resolution/

Answer 4

这可以使用javascript实现：

<script language="javascript">
if ((screen.width>=1024) && (screen.height>=768)) {
  alert('High resolution');
} else {
  alert('Low resolution');
}
</script>

CSS：根据屏幕分辨率使用不同的宽度

4 个答案: