自动调整固定宽度布局以适应屏幕宽度

Question

我有一个固定宽度布局的网站，无法轻易更改。它的宽度约为 1300 像素，因此在较小的屏幕上渲染效果不佳。

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

是否有解决这个问题的标准解决方案（图书馆之类的）？

Answer 1

您已经将标签 "responsive" 放入您的标签中。这意味着您知道自己想要一个响应式网站。

您可以在特定宽度上创建媒体查询并将缩放属性设置为合适的值（但 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%? */
  }
}

Answer 2

首先将此 meta 标记添加到您页面的 <head>:

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

以上将强制网站在移动设备上扩展。但是您需要使用 media queries

做更多的工作

您可以为不同的屏幕尺寸创建不同的规则：

@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) */
}

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

自动调整固定宽度布局以适应屏幕宽度

Auto-fit fixed-width layout to screen width

html

javascript

css

responsive