Question

有没有办法在我们访问过我的网站后调整用户的屏幕尺寸？基本上，如果我缩小我的网页，我的容器和盒子是不对齐的。

所以我想知道有什么方法可以使用css或javascript功能来执行以下操作：

if screen size is x, 
then adjust screen size to x

Answer 1

您有两种选择。一个是你可以做其他答案建议的。或者你可以使用javascript。 Javascript可能更可靠。您可以轻松添加窗口调整大小事件并调用函数来调整元素。 Javascript有一个innerHeight和innerWidth，以便以像素为单位查找页面的总高度或宽度。然后只使用if语句。我现在正打电话，但稍后会提出代码。如果你不喜欢，我会改进这个答案。如果你在css中使用百分比，那么还有什么用呢？

Answer 2

使用HTML5，您可以在CSS中使用@media来实现此目的。例如，

@media screen and (max-width: 480px)
{
    div#wrapper
    {
      width: 400px;
    }
}
@media screen and (max-width: 1024px) and (min-width: 481px)
{
    div#wrapper
    {
      width: 800px;
    }
}
@media screen and (min-width: 1025px)
{
    div#wrapper
    {
      width: 1080px;
    }
}

实现相同结果的另一种方法是为每个设置单独的CSS样式表，然后您可以使用这样的代码根据屏幕大小交换CSS。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

根据用户的浏览器调整屏幕大小

2 个答案: