根据屏幕宽度自动调整固定宽度布局

Auto-fit fixed-width layout to screen width

本文关键字：调整 固定宽度 布局 屏幕      更新时间：2023-09-26

我有一个固定宽度布局的网站，这是不容易改变的。它的宽度大约是1300像素，所以在较小的屏幕上渲染不好。

我正在寻找一个解决方案，使网站即使在小屏幕上也很好看。这应该是可能的，因为如果用户将浏览器缩放级别更改为75%左右，一切看起来都很好。但我读到，在JavaScript中，更改浏览器缩放级别是不可能的，而且该功能的行为在浏览器之间并不一致。

有没有标准的解决方案（库或其他什么）来解决这个问题？

您已经在标记中放入了标记"responsible"。这意味着你知道你想要一个响应迅速的网站。

您可以在特定宽度上创建媒体查询，并将缩放属性设置为合适的值（但Firefox不支持此功能：http://caniuse.com/#search=zoom；您可以使用transform:scale（）作为回退）。

示例：

@media (max-width: 600px) {
  body {
    zoom: 0.75;
    moz-transform: scale(0.75, 0.75);
  }
}

最好的解决方案是在特定宽度上创建媒体查询，并努力更改元素的宽度。我不明白为什么宽度不能轻易改变。

示例：

@media (max-width: 600px) {
  .myElement {
    width: 600px; /* whatever, maybe 100%? */
  }
}

首先，将此meta标记包含到页面的<head>:中

<meta viewport="width=device-width, initial-scale=1.0">

上述情况将迫使网站在移动设备上进行扩展。但是您需要使用媒体查询做更多的工作

您可以为不同的屏幕大小创建不同的规则：

@media(max-width: 768px){
    /** Small Mobile Screens */
}
@media(min-width: 768px){
    /** Large Mobile Screens, tablets e.t.c */
}
@media(min-width: 992px){
    /** Desktops, Laptops */
}
@media(min-width: 1200px){
    /** Larger Screens (Desktops, Laptops, e.t.c) */
}

您可以为每个屏幕设置不同的页面宽度（以像素为单位）

相关文章：