0

我正在设计一个网站，但我遇到了屏幕分辨率问题。我想缩放我的页面，但我做不到。

它是我的网站和 21.5 inc mac 屏幕：（完成，没问题） 在此处输入图像描述

它是我的笔记本电脑屏幕，分辨率为 1366 x 768 像素； 在此处输入图像描述

我在css上试过这个；

body, html {height:100%;}

这在 html 上；

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

文档类型是：XHTML 1.0 过渡

但不起作用。我该怎么做？

谢谢！

4

3 回答 3

2

基本上，你不能以一种简单、容易的方式。

视口标签和所有仅适用于移动设备（当前）的标签，因为它们以与桌面浏览器不同的方式加载整个页面并在其周围平移。

大多数网站都设计为垂直滚动，所以 CSS 非常适合水平拉伸，但对于垂直做同样的事情却非常非常糟糕。

一种方法是设计各种不同的版本，然后使用媒体查询来更改不同高度的属性。

在您的 CSS 中，这看起来像：

#box {
    width:100px;
    height:100px;
    background-color:red;
}

@media all and (max-height: 400px) and (min-height: 200px) {
    #box {
        background-color:green;
    }
}

除非屏幕高在 200px 到 400px 之间，否则这将生成一个红色的框。当屏幕尺寸不同时，您可以使用该技术做不同的事情。这几天得到了很好的支持。（http://caniuse.com/#feat=css-mediaqueries - 基本上无处不在，但 IE8 及以下版本除外）。

另一种方法是使用视口单位（vh而不是pxor em），其中1vh= 浏览器高度的 1%。现在支持非常糟糕（http://caniuse.com/#feat=viewport-units - 没有 firefox，没有 Opera，IE9 及更高版本）。

除此之外，您正在考虑使用 javascript 来调整圆形菜单的高度以使其缩放。如果您还没有搞清楚 JS，那么 jQuery 是值得一看的。

简而言之，为了让事情变得简单：

  • 设计垂直滚动的网站
  • 设计不能仔细滚动的网站，并为 600px、768px、720px 和 1080px 高屏幕定义不同的行为（记得在这里减去浏览器 chrome 的高度，我猜你可以估计在 100-300px 之间）
于 2012-11-04T17:00:39.553 回答
0

您将 html 和 body 的高度设置为 100%，但是 body 内元素的高度和宽度呢？为了使它们流畅并适合所有屏幕尺寸，您必须以百分比形式给出几乎每个元素的高度和宽度以及填充和边距。

于 2012-11-04T17:18:58.230 回答
-1

您是否尝试过使用元标记视口？

 <meta name="viewport" content="width=320">
于 2012-11-04T16:46:20.970 回答