所以我遇到了一个问题,浏览器与vh,vw单元兼容并且与calc()兼容,BUT与calc中的vh,vw单元不兼容.所以我不确定如何使用modernizr来测试该特定情况.

有什么想法吗？非常感谢!

不幸的100vh是,并不总是与100%浏览器高度相同,如下例所示.

html,
body {
    height: 100%;
}

body {
    overflow: scroll;
}

.vh {
    background-color: blue;
    float: left;
    height: 50vh;
    width: 100px;
}

.pc {
    background-color: green;
    float: left;
    height: 50%;
    width: 100px;
}

<div class="vh"></div>
<div class="pc"></div>

这个问题在iPhone 6+上更为明显,上部位置栏和下部导航栏如何在滚动时展开和收缩,但不包括在计算中100vh.

100%可以通过window.innerHeight在JS中使用来获取高度的实际值.

有没有一种方便的方法来计算100vhJS中像素的当前转换？

我试图避免需要生成带内联样式的虚拟元素来计算100vh.

出于此问题的目的,假设一个恶意环境,其中max-width或max-height可能产生不正确的值,并且100vh页面上没有任何现有元素.基本上,假设任何可能出错的东西都有本机浏览器功能,但保证是干净的.

到目前为止我提出的最好的是:

function vh() {
    var div,
        h;
    div = document.createElement('div');
    div.style.height = '100vh';
    div.style.maxHeight = …

在下面的示例 Dash 应用程序中，我尝试创建具有可变行数和列数的动态布局。这种动态网格样式布局将填充各种图形，可以通过下拉菜单等进行修改。

到目前为止，我遇到的主要问题与视口单元有关，并试图适当地设置单个图形的样式以适应动态布局。例如，我正在dcc.Graph()通过视口单位修改组件的样式，其中尺寸（例如height，width可能是35vw或23vw取决于列数）。当我从3改变的列数为2，例如，height和width的dcc.Graph()部件清楚地改变，但是这种改变不会反映在实际的呈现布局，直到窗口被物理调整大小（见示例代码下面的图片） .

如何强制dcc.Graph()组件传播这些更改而不必调整窗口大小？

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True

app.layout = html.Div([

    html.Div(className='row', children=[

        html.Div(className='two columns', style={'margin-top': '2%'}, children=[

            html.Div(className='row', style={'margin-top': 30}, children=[

                html.Div(className='six columns', children=[

                    html.H6('Rows'),

                    dcc.Dropdown(
                        id='rows',
                        options=[{
                            'label': i,
                            'value': i
                        } for i in [1,2,3,4]], …

DEMO

有时我会使用类似于此方法的方法创建一个正方形(或任何矩形,实际上),它将遵循任何大小的比例.

我想要的是:

• 防止在高度较小的设备上延伸到视口外的正方形,即手机在景观中

提出的解决方案

• 使用的方法将square的宽度限制为视口高度的百分比 max-width: 90vh
• 期望比例得到尊重

CSS

    .square {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
    }

    .square-inner {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .mw { max-width: 90vh;} /* solution, but makes things break */

HTML

    <div class="square mw">
        <div class="square-inner"></div>
    </div>

应该怎么做

• 在小高度的视口中,正方形的最大宽度应为视口高度的90%

实际发生了什么:

• 当视口高度小于方形宽度时:
  • 宽度按每个vh值约束
  • 高度是从正方形的宽度已经计算出它不被约束到vh
  • 我们得到一个垂直长矩形

规范说相对值是从'包含块'计算出来的,对我而言似乎应该是容器的当前宽度.

浏览器行为:

• Chrome 29.0.1547.65:如上所述
• Firefox 23.01:如上所述
• Opera:完全不尊重vh未经Opera 16+验证

我是否错误地解释了规范,或者这是浏览器供应商实施的可能错误？

有人知道Safari vh规则是否有修复吗？

#what{
 min-height:70vh;
}

一切正常，在所有浏览器中，但仅在 Safari 中无法识别？safari 是否有修复，我们可以在 css 中使用 VH 规则？

我尝试使用ONLY vh尺寸创建登录表单.这样做,希望表单总体上可以根据视口进行缩放.

它没有!由于某种原因放大,创建一个空白区域,在输入字段和下面的文本之间放大得越大.

http://jsfiddle.net/TnY3L/

小提琴制作得不是很好,只是从我的项目中复制它.但你可以看到什么是错的 - 这才是最重要的.

任何人都知道如何解决这个问题？

<span id="loginform">
    <input type="text" name="login" class="LFORM" placeholder="USERNAME" />
    <input type="password" name="password" class="LFORM" placeholder="PASSWORD" />
    <button id="LB" type="button" style="font-size: 1.4vh;">OK!</button><br />
    <a href="" id="CALINK" style="font-size:1.4vh;">Create account</a>
    <a href="" id="FLLINK" style="font-size:1.4vh;">Forgot login?</a>
</span>

::-webkit-input-placeholder {
     font-size: 1.4vh;
}
#loginform {
     float: right;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     right: 1.5vh;
}
#CALINK {
     float:left;
     font-family:my_fat_font;
}
#FLLINK {
     float:right;
     font-family:my_fat_font;
}
#LB {
     border-radius: 0.4vh;
     font-family: my_fat_font;
     color: #ffffff;
     background: #ff9f2d;
     padding: 0.2vh …

根据如何正确使用css-values视口相对长度？,我尝试以下列方式使用视口单元,自动放大大显示器上的小页面:

/* automatically magnify business-card-style page in large viewports */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 150% magnification at 75em */
  html {font-size: 2vmin;}
}

但是,在Google Chrome中进行测试后,它会使缩放功能停止工作.

Chrome中的错误/功能是否可以让缩放立即停止使用上述代码,还是设计和规范？

是否有一个 CSS 相当于相vmin对于父元素而不是视口的较小尺寸？

我有一个左侧有导航面板的页面，因此只有部分视口宽度可用于主要内容，并且我试图拥有一个不会从 main 溢出的响应式正方形<div>。我找到了响应式方块的代码作为这个问题的答案，但是在横向模式下，方块的高度会溢出。

我可以使用 JavaScript 通过侦听窗口大小调整来重新计算正方形的宽度作为父级宽度和高度之间的最小尺寸，但在我的实际网站中，父级大部分时间都在，display: none因此它没有宽度，我想避免当它出现时需要重新计算尺寸。

这是一个 JsFiddle，其中包含突出问题的示例和背景： https: //jsfiddle.net/wy874pqv/4/。下面是我使用的代码。

HTML：

<body>
  <div id="main">
    <div class="wrapper">
      <div class="one-by-one aspect-ratio"></div>
      <div class="content">
        <div class="circle">
        </div>
      </div>
    </div>
  </div>
  <div id="leftPanel">
  </div>
</body>

CSS：

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}

div#leftPanel {
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0;
  margin: 0;
  background: red;
}

div#main {
  height: 100%;
  width: 80%;
  position: absolute;
  right: 0;
  margin: …

背景

我使用视口单位调整所有内容的大小：

body {
  font-size: calc((1vw + 1vh) / 2);
}

h6 { 
  font-size: 1em;
}

div { 
  width: 20em;
}

随着屏幕中像素数量的增加，单元的大小也会增加。例如，1920 x 1080 显示器的字体比 2560 x 1080 显示器的字体小。这允许在没有媒体查询的情况下自动支持超宽、垂直和高 DPI（8k 甚至 16K）显示。

问题

使用 Three.js，对象缩放仅响应屏幕高度。该对象在 1920x1080 显示器上的显示大小与在 2560x1080 显示器上的大小相同。这是因为 Three.js 相机使用垂直视野 (FOV)。

默认行为- 2560x1080 与 1080x1080 相比。请注意，文本变小了，但 3D 对象的大小保持不变。代码笔示例

我的尝试

Three.js 只响应高度的原因是因为它使用了一个垂直视角。我尝试使用我在 stackOverflow here上找到的这个公式将垂直 fov 更改为对角 fov 。

var height = window.innerHeight;
var width = window.innerWidth;
var distance = 1000;
var diag = Math.sqrt((height*height)+(width*width))
var …

我有一个 div 标签，我意识到它没有像它应该的那样填充 100% 的高度。

我的代码：

#container {
  width: 100vw;
  height: 100vh;
  background: purple;
}

body {
  margin: 0px;
}

<div id="container"></div>

<div id="container"></div>

发生了什么？

好吧，如果我只有上面的这段代码片段，我当然会将 div 占据 100% 的视口！问题是我的页面上不仅有这个代码，我还有更多的东西，我在body标签里面插入了这个代码部分，在body标签里面的某个“地方”，也就是说，我插入了一些元素，并且这些元素有这个div后，但是不占，100%的视口观察它是怎么回事

结果在您的页面上的视觉效果如何？

我滚动了页面，但我的 div 仍然占据整个视口的 100%。我不正确吗？如果这应该发生，为什么不发生？

说明：伙计们，我发现了这个问题，但我不知道如何解决它，好吧，事情是这样的，当容器 div 下方或上方有元素时，div 不会占据 100% 的视口，看这个图像并查看：

我使用的代码实现了这一点：

我的代码 HTML：

body {
  color: red;
  background: green;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: purple;
}

p {
  font-size: 20pt;
}

<div id="container"></div>
<p>ksksks</p>

上图中发生的情况与我的页面上发生的问题相同，即如果页面上没有元素，div 仅填充视口高度的 100%，而我希望能够使高度为 100%即使在页面上有元素的视口。 …