Make Body's的宽度是使用CSS和JS的Screen的两倍

Make Body's width as a doubling of Screen with CSS and JS

本文关键字：Screen JS CSS 两倍 Body Make      更新时间：2023-09-26

我想让Body的宽度是Screen的两倍。

对于exmaple，
如果屏幕的宽度（确切地说，窗口）是500px，
那么Body的宽度应该是1000px。

我只能使用HTML、CSS和Javascript
因为服务器不允许我使用PHP或其他程序。

那么，如何使用CSS和JS呢？

您可以使用浏览器窗口单元：

body { width: 200vw; }

这意味着"当前视口宽度的200%"。您也可以将vh用于"视口高度"。这在IE9中得到了支持。

请注意，在<body>需要填充的情况下，使用"边界框"框大小可能是个好主意。你可以为你的页面设置这样的默认值：

body { box-sizing: border-box; }
body *, body *:before, body *:after { box-sizing: inherit; }

您可以在%中指定宽度，如下所示：

html,body{
  width:200%;
}

或使用类似vw的

body{
  width:200vw; /*less browser support*/
}

仅IE9、FF30、chrome27、Opera 23支持此单元。

vw浏览器支持@caniuse。

相关文章：