标签: viewport-units

视口单元,保持纵横比？

所以我刚刚发现了视口单元,我真的想要使用它们.

第一个挑战:我的元素的"基本大小"为760x670像素.我想使用视口单元对其进行缩放,以便高度为100vh或宽度100vw为较小者.

不幸的是,虽然我可以100vmin用来获得两者中较小的一个,但我只能将它应用于宽度或高度,而不是两者.

目前我正在使用:

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

Run Code Online (Sandbox Code Playgroud)

这会缩放宽度以适合屏幕,从而产生垂直滚动.这不是太糟糕,但我更喜欢它,如果我真的能让它适合视口.

css viewport viewport-units

Nie*_*sol

2014 09-23

6
推荐指数

1
解决办法

6138
查看次数

vw和vh单位如何工作？

我想知道如何计算的价值vh和vw.我正在设计一个使用2vw它的网站,它完美地用于我的文本.但是,我猜对了.请告诉我这些装置是如何工作的,以便我将来可以使用它们.我也想知道他们是否有跨浏览器支持.

html css browser viewport-units

dan*_*mad

2018 05-11

6
推荐指数

1
解决办法

4335
查看次数

使用100vw和vh会创建超出视口大小的额外空间.我怎么摆脱它？

尝试在div上使用100 vw和100vh制作全屏帧.我在这个JSfiddle中有2个,你可以看到每个帧的底部和右边都有额外的空间.

有没有一种方法可以使用vw和vh并且在没有额外空间的情况下完美地适应它？

css看起来像这样:

.f1 {
width: 100vw;
height: 100vh;
background-color: blue;
}

.f2 {
width: 100vw;
height: 100vh;
background-color: grey;
}

Run Code Online (Sandbox Code Playgroud)

*编辑:似乎宽度100%解决了这个问题,但这个解决方案是否合适？它会破坏什么吗？

html css viewport-units

Reo*_*New

2014 09-20

6
推荐指数

1
解决办法

4391
查看次数

元视口和宽度=设备宽度与百分比尺寸

我正在尝试确保在设置width = device-width时正确理解Meta视口标记的工作方式.

在
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">使用像素单元的移动设备上工作(或者应该)被视为在320像素宽的网格上给出时,这是一个正确的陈述吗？即宽度为160px的元素占据屏幕的(160/320 = 50%)？

在桌面浏览器上运行时,这种行为似乎不起作用,所以假设我想在移动设备和桌面设备上获得相同的设计,我应该/可以使用百分比还是vw/vh单位？

css mobile viewport viewport-units

epe*_*leg

lucky-day

6
推荐指数

1
解决办法

3062
查看次数

在移动设备的HTML电子邮件中使用vw(视口宽度)的字体大小是否可以

我正在创建一个HTML电子邮件模板.桌面版本使用表格,几个内联css,所有大小都以%或px值定义.

对于移动版本,我使用div和css.现在我想根据视口宽度调整一些文本的大小.因为如果我将某个标题的字体大小定义为28px,那么某个文本在更宽的设备上看起来可能正常,但在较小的设备上,文本会变大并且会中断到下一行.

现在我正在考虑像这样设置基本字体大小:(在整页模式下运行片段,然后调整窗口大小以查看效果)

:root {
  font-size: calc(8px + 4vw);
}

Run Code Online (Sandbox Code Playgroud)

<h1>
  Header 1
</h1>
<h2>
  Header 2
</h2>
<p>
  Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum.
</p>

Run Code Online (Sandbox Code Playgroud)

像这样,随后的字体大小根据视口宽度进行缩放,标头在较小的设备上变小,防止文本中断,或者至少使其不太可能.通过使用calc()我也定义了一定的最小值,因此文本不会变得太小.

现在我的问题是,将它用于电子邮件(移动)是否可以,或者是否受到移动电子邮件客户端的严重支持？浏览器支持非常好,但我找不到有关移动电子邮件客户端支持的任何信息.

css mobile html-email viewport-units

Dav*_*vid

lucky-day

6
推荐指数

1
解决办法

2812
查看次数

使用“ vw”获得100％宽度的标题

我有一个h1我想适合视口的整个宽度，该视口由等宽字体中的13个字符组成。阅读有关视口大小的排版的CSS-Tricks文章后，如果要实现此目的似乎合乎逻辑，我只需要将h1的样式设置为：

h1 {
    font-size: 13vw;
    font-family: monospace;
}

Run Code Online (Sandbox Code Playgroud)

但是，这是在渲染时留下了一些空间（突出显示文本以查看空白）：

（这里会有一个图像，但是我没有足够的代表，所以请单击此处获取JSFiddle）

我试过其他尺寸，font-size: 14vw;有点太大，font-size: 13.99vw;似乎刚刚好，但奇怪的font-size: 13.999vw;是仍然太大吗？

有人可以解释这里发生了什么吗？为什么等宽字体中的13个字符长的字符串的每个字符都需要大于（100/13）％的视口宽度才能适合整个视口宽度？

css fonts font-size css3 viewport-units

blu*_*kie

2015 07-15

5
推荐指数

1
解决办法

377
查看次数

100vh 上的背景封面图像 - 屏幕差异

所以我尝试用 100vh 在封面上设置图像 - 但我有非常具体的情况。

在我的图像中，我有一个大盘子和平板电脑“躺在”这个盘子上。

我的目标是使该图像的标题为 100vh，但有一个问题 - 当我尝试在我的大显示器上测试它时，它看起来不错，但在高度较小的显示器上，它看起来很糟糕 - 我需要这款平板电脑在所有桌面上 100% 可见设备。

检查我的“整页”选项，看看我在说什么。

我还尝试在没有平板电脑的情况下制作此图像封面，然后尝试使用平板电脑和放置另一张图像position:absolute，但我的第二张图像并不总是位于与该板在框架内的完全相同的位置。

有可能实现我的愿望吗？

.cover {
  position: relative;
  height: calc(100vh - 80px);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url(https://s4.postimg.org/uwxudv17x/cover.png);
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="cover">
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

css background background-image viewport viewport-units

Mic*_*Obi

lucky-day

5
推荐指数

1
解决办法

1万
查看次数

vh 单元行为不一致

我有一个伪元素，悬停时出现：

height: 0.4vh;

Run Code Online (Sandbox Code Playgroud)

高度不会改变，只有宽度会改变。然而，由于某种原因，在某些条件下，不同伪元素的高度不同（这里的两条深色线都有height: 0.4vh）：

vh单位怪异

我举起这个小提琴来演示，但意识到这种奇怪现象是否发生取决于视口高度： https: //jsfiddle.net/vuw693La/

我在 Chromium 和 Firefox 上遇到这个问题。我是否做错了什么，或者没有办法使vh单位达到“像素完美”？

css viewport-units

jcu*_*nod

2016 10-30

5
推荐指数

1
解决办法

2140
查看次数

在 vw 中设置了 Div 的宽度，但无法正常工作

我的 CSS 有问题（或者至少我认为问题出在 CSS 上）。我在大众中设置了所有内容，但它的行为很奇怪。在大分辨率下看起来很正常，但在小分辨率下则不然。

您可以在此GIF上看到它（它太大，无法在此处上传）。如您所见，当屏幕较小时，最后一个 div 向下移动到第一个下方。

这是现场演示：http : //mc2.devicarus.eu/

var width = document.getElementById("box1").offsetWidth;
var box1 = document.getElementById('box1');
box1.style.height = width + "px";
var box2 = document.getElementById('box2');
box2.style.height = width + "px";
var box3 = document.getElementById('box3');
box3.style.height = width + "px";

Run Code Online (Sandbox Code Playgroud)

div.boxes {
  width: 80vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-top: 3%;
}

div.box {
  border-style: solid;
  border-color: black;
  border-width: 0.15vw;
  width: 24.7667vw;
  background: url('http://mc2.devicarus.eu/img/wood.png');
  background-size: 150px;
  display: inline-block;
  margin-left: 0.8vw;
  margin-right: 0.8vw;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)