自动将固定宽度版式调整为适合屏幕宽度

Question

I have a website with a fixed-width layout, and that cannot be changed easily. 我有一个宽度固定的网站，无法轻易更改。 Its width is around 1300px, so it doesn't render well on a smaller screen. 它的宽度约为1300像素，因此在较小的屏幕上渲染效果不佳。

I am looking for a solution to make the website looks good even on small screens. 我正在寻找一种解决方案，即使在小屏幕上也可以使网站看起来不错。 It should be possile, because if the user changes the browser zoom level to something like 75%, everything looks quite good. 这应该是可能的，因为如果用户将浏览器的缩放级别更改为75％之类的东西，则一切看起来都会很好。 But I read that changing browser zoom level is not possible in JavaScript, and that the behaviour of this feature is not consistent across browsers. 但是我读到，无法在JavaScript中更改浏览器缩放级别，并且此功能的行为在浏览器之间不一致。

Is there a standard solution (a library or something) to solve this problem? 是否有解决此问题的标准解决方案（库或其他工具）？

Answer 1

You already put the tag "responsive" in your tags. 您已经在标签中添加了“响应”标签。 This means you know that you want a responsive website. 这意味着您知道您想要一个响应式网站。

You could create mediaqueries on specific width's and set the zoom property to a suitable value (but Firefox does not support this: http://caniuse.com/#search=zoom ; you can use transform: scale() as fallback). 您可以在特定宽度上创建媒体查询，并将zoom属性设置为适当的值（但Firefox不支持此功能： http : //caniuse.com/#search=zoom ；您可以使用transform：scale（）作为后备）。

EXAMPLE: 例：

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

The best solution would be to create mediaqueries on specific width's and take the effort of changing the width's of the elements. 最好的解决方案是在特定宽度上创建中介查询，并努力更改元素的宽度。 I don't see why the width can't be changed easily. 我不明白为什么宽度不能轻易改变。

EXAMPLE: 例：

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

Answer 2

For a start include this meta tag to your page's <head> : 首先，将此meta标签包含在页面的<head> ：

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

The above will force the website to scale on mobile devices. 以上内容将迫使网站在移动设备上扩展。 But you need to do some more work using media queries 但是您需要使用媒体查询做更多的工作

You can create different rules for different screen sizes: 您可以为不同的屏幕尺寸创建不同的规则：

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

You can set the width of your page to a different size in pixels for every screen 您可以为每个屏幕将页面宽度设置为不同的像素大小

自动将固定宽度版式调整为适合屏幕宽度

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-04-28 08:34:29

解决方案2
1 2016-04-28 08:40:53

自动将固定宽度版式调整为适合屏幕宽度

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-04-28 08:34:29

解决方案2 1 2016-04-28 08:40:53

解决方案1
1 已采纳 2016-04-28 08:34:29

解决方案2
1 2016-04-28 08:40:53