-2

我在一家宣传机构工作，我的老板在 Photoshop 中设计模型（基于他的 1920x1080 屏幕），并且网站最终布局必须看起来 90% 像他的，非常接近。我们不使用 Bootstrap（或任何 css 框架），因为他自己定义了边距和列，因此 Bootstrap 获得的不仅仅是帮助。

我们使用 16:9 纵横比的样机图像，可以在浏览器中打开，如果您在任何 16:9 显示器上查看，它都非常适合。当我们继续实际创建 html / css 页面时，我们无法实现这种效果，并且依赖于许多媒体查询来“修复”每个比设计时更大或更低的分辨率。

有没有办法制作一个元素或整个身体，从原始设计简单地缩放，这样我们就不需要在共享相同纵横比的屏幕之间进行任何媒体查询？

这样，我们将只有三个媒体查询：一个针对 16:9，一个针对 9:16，一个针对 16:10。

附加信息：我正在寻找类似于 transform: scale 属性的东西，但这个属性在这里特别不起作用（使用它会导致按钮在某些浏览器中变得不可点击的问题）。

4

2 回答 2

3

....从技术上讲，是的，但实际上，这是很多工作，并且不会真正为您节省任何时间。您最好的选择是返回并开始使用 Bootstrap。至少，使用 Bootstrap 的cols 和rows Bootstrap 是构建响应式网站的绝佳工具，适合那些不习惯自己构建响应式网站的人。

我……有很多话要说。

首先，

  1. 如果您正在构建网站，那么您真的应该在计算机上连接两台显示器。就个人而言，我更喜欢一个小屏幕 (1280x800) 和一个大屏幕 (1920x1080)，因为它让我对响应式设计更加了解和舒适。但这是我个人的喜好，很多人更喜欢两台大显示器。至少，你还应该有一个 1080p 的屏幕，这样你就可以直接在上面工作了。

  2. 直接回答您的问题，此策略不适用于平板电脑和手机，因为台式计算机上的纵横比是“横向”，但在移动设备中，纵横比是“纵向”。如果您曾尝试在移动设备中查看 1920x1080 图像，您会立即明白为什么会出现此问题。

然而。如果您正在寻找一种基于主体扩展整个网站的方法，...首先想到的方法 REM 非常流行，我假设您已经尝试过，但是...我会澄清的，以防万一。

您可以使用百分比、EM 或 REM定义所有内容h1（ 、h2、h3、p、borders、padding、margin、height、fontsize等box-shadow...一切。该短语px不应出现在您的样式表中。），然后使用一系列简单的媒体查询来扩展网站，例如这个：

@media( min-width:1200px){
    html,body{
        font-size: 14px;
    }
}
@media( min-width:1400px){
    html,body{
        font-size: 15px;
    }
}
@media( min-width:1600px){
    html,body{
        font-size: 16px;
    }
}
@media( min-width:1800px){
    html,body{
        font-size: 17px;
    }
}

这将导致整个网站扩展。显然，如果您正在使用主题或框架（如 Bootstrap），则需要修改该框架以使用 REM。

#3. 最后我要说的是，大多数网站在 720p 屏幕和 1080p 屏幕上看起来并不完全相同。例如，以 StackOverflow 本身为例。这是我们正在查看的当前页面的样子：

div#left-sidebar {
    width: 164px;
}

#sidebar {/*Right sidebar*/
    float: right;
    width: 300px;
}

div#mainbar {/*Center section*/
    width: calc(100% - 300px - 24px);    
}

#content {/*And this wrapper around it all*/
    max-width: 1100px;
    width: calc(100% - 164px);/*left sidebar*/
}

如果你看它，整个网站或多或少max-width:1480px。如果它变得比这小，侧边栏保持相同的大小，但中间部分有width:100%并缩小以适应屏幕。

在大约 1000 像素处，StackOverflow 放弃并隐藏了右侧边栏，因为没有足够的空间，但它仍然不会改变任何字体或图标的大小。（在任何屏幕尺寸上，从 1920 像素一直到平板电脑。）

一个好的设计师应该把这种“响应式设计”牢记在心，给他的程序员一个可以干净收缩的设计，用这种方式。

于 2020-09-25T14:42:36.570 回答
-1

您正在寻找vwCSS 单元。（不确定您是否也需要vh）。

查看此网站以直观了解这些单元的工作原理：https ://sparanoid.com

vw单位是相对于视口宽度的。因此，如果您将所有内容都编码在vw. 您的网站将表现得像一个图像，正是您所要求的。

于 2020-09-27T14:47:57.120 回答