CSS如何获取窗口的宽度(px)？

u91tlkcl 于 2023-11-19 发布在其他

关注(0)|答案(3)|浏览(181)

此问题在此处已有答案：

How can I horizontally center an element?（131个回答）
5天前关闭。
我目前正在尝试编写代码，使内容正好为895像素宽的网站居中，我希望它居中。所以，我尝试用CSS编写以下代码：

body {
...
     padding-left: calc(([window width] - 895) / 2);
}

字符串
有没有更好的方法？有没有更好的方法？
我尝试了以下变量名：view-width vw screen screen.width screen-width

css

来源：https://stackoverflow.com/questions/77475266/how-can-css-get-the-width-of-a-window-in-px

3条答案

按热度按时间

sf6xfgos1#

虽然我没有找到如何使特定的代码工作，但我找到了另一种方法来集中我的网站;我这样做了：

body {

. . . 

margin: 0 auto;

}

字符串

赞(0）回复(0）举报 2023-11-19

1hdlvixo2#

对于窗口宽度，你可以使用100vw，这实际上意味着“100%的视口宽度”。你可以在calc公式中混合使用px单位。
所以你的问题中的填充设置可以写为

padding-left: calc((100vw - 895px) / 2);

字符串

赞(0）回复(0）举报 2023-11-19

0lvr5msh3#

尝试以下代码片段，

body {
  padding-left: calc((100vw - 895px) / 2);
  max-width: 100%;
  box-sizing: border-box; /* Ensures padding is included in the total width */
}

@media (max-width: 895px) {
  body {
    padding-left: 0;
  }
}

字符串
你可以使用calc()函数沿着和vw来实现一个比例宽度，如果需要的话，你可以添加一个媒体查询来处理更小的viewport宽度。

赞(0）回复(0）举报 2023-11-19

我来回答

CSS如何获取窗口的宽度(px)？

3条答案

相关问题

热门标签

最新问答