Question

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

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

是否有解决此问题的标准解决方案（库或其他东西）？

Answer 1

您已将标记＆＃34;响应＆＃34;在你的标签。这意味着您知道自己需要一个响应式网站。

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

您可以为每个屏幕将页面宽度设置为不同的像素大小

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

2 个答案: