标签: viewport-units
在 android 中使用 vh 设置父高度时，100% 高度不起作用
我在 Android 上使用 Chrome 时遇到了这个问题，它可以在同一设备上的其他浏览器上运行：
问题是当我将高度设置为 100% 时，嵌套的 DIV 没有填充其父级（其高度为 100vh）。
<style>
#a{width:100%;height: 100vh;background-color: red;}
#a .inner {width: 100%;height: 100%;min-height: 100%; background-color: green;}
</style>
<div id="a">
<div class="inner">The GREEN must fill the screen</div>
</div>
我在 Chrome 版本上进行了测试：26.0.1410.58 和 30.0.0.0。
:(
推荐指数
解决办法
查看次数
CSS3动画/关键帧,在IE11问题中使用vw进行转换
我在屏幕上制作一个元素,但在IE11中,奇怪的事情正在发生.我正在开发中,所以我无法分享实时代码.但我创造了一个小提琴来复制这个问题.
基本上,当我使用视口宽度又名vw与transform:translateX();内部的@keyframes到在动画中使用,IE11不反映的宽度viewport在动画.
所以我创建的小提琴取一个位于以下位置中心的元素viewport:
- 在屏幕的左边缘开始显示,其中一半元素出现
- 移动到视口的中心,暂停
- 然后移动到视口的右边缘,一半元素离开屏幕
小提琴:https://jsfiddle.net/Bushwazi/7xe0wy8z/4/
- 在我正在研究的网站中,IE11将该元素设置为动画,就像页面宽10倍一样
- 在小提琴中,动画反向运行,永远不会到达页面边缘.
因此,在这两种情况下,IE11都没有使用正确的vwCSS动画内部宽度.
HTML:
<!--
The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
-->
<article>
<p>IE11 weirdness when transforming vw inside keyframes</p>
<strong><span>BLOCK</span></strong>
</article>
CSS:
* …推荐指数
解决办法
查看次数
Flex-box 100vh延伸到了移动safari chrome后面-是否有任何已知的技巧或解决方案
Flex-box 100vh延伸到了移动safari chrome浏览器之后-是否有任何已知的技巧或解决方案？-或者说真的太好了吗？
我经常想要一个“模式”类型的div封面，或者一个简单的一键式UI屏幕的全屏图像。我使用flex-box的次数越多，我可以依靠的一些旧技术就越少。当达到100％的高度时，我通常会达到以下目的：
html, body {
height: 100%;
}
HTML和主体没有明确的高度...并且无法真正知道它们的高度。为了告诉任何孩子身高多高，他们需要知道父母的身高。深度嵌套的元素会变得非常混乱。
100vh视口高度可以消除嵌套问题，但在移动浏览器上，如何发挥效果似乎存在意见分歧。在iOS Safari中，vh其区域将位于其底部的插队UI栏下方。居中的元素不会因为居中的偏移而居中显示，并且当您尝试滚动时，所有内容都会弄得一团糟，笨拙并感到折断。
我可以使用modernizr来检查触摸，但这是不希望出现的位置。在某些情况下，我可以为html和body添加100％的类，包括视图嵌套视图，但是当诸如flickity之类的东西注入许多子元素时，或者MVC中有嵌套的视图会生成更多的嵌套元素，告诉一切都为100％高度/触摸并不是一种一致的措施，因为存在触摸台式机等，这确实是不明智的。
.element-with-background-image {
width: 100%;
height: 100vh;
background-image: url(...);
background-size: cover;
background-position: center center;
}
感觉就像我们应得的。他们在视口meta-tag上夺走了我们的max。我只想做点不觉得坏的东西。
简单的示例：http : //s.codepen.io/sheriffderek/pen/LWevrx 调试版本（在电话上进行测试）：http : //s.codepen.io/sheriffderek/debug/LWevrx
带有滑块的更复杂的示例：http : //codepen.io/sheriffderek/pen/BWJEKJ 调试版本（用于在电话上进行测试）：http : //s.codepen.io/sheriffderek/debug/BWJEKJ
制作东西position: fixed;似乎是获得完全覆盖而又不会出现故障的唯一方法（通常直到最近才引起严重故障）
固定位置版本：http : //codepen.io/sheriffderek/pen/XMVQOX 调试版本（以在手机上测试）：http : //s.codepen.io/sheriffderek/debug/XMVQOX
固定位置w滑块/需要获取窗口高度并将其添加到所有子窗口中-我已经能够提出的最佳解决方案：http ://codepen.io/sheriffderek/pen/RpxOzM 调试版本（用于在手机上进行测试） ：http：//s.codepen.io/sheriffderek/debug/RpxOzM
摘要
是不是在这种情况下不能使用100vh吗？我应该将其从工具箱中取出吗？或者-您是否有一套规则或技术可以让我继续生活？
推荐指数
解决办法
查看次数
Safari + CSS：将“ calc”与“ vh”一起使用不起作用
我在Safari上遇到了一个非常小众的CSS问题。
我有以下CSS规则：
min-height: calc(100vh - 115.5px - 25px*2);
在Chrome这个作品，但Safari浏览器似乎并不喜欢的组合calc和vh。（例如，如果我用替换vh，它会起作用%-但我确实需要根据vh或适当的替代方法进行计算。）
有什么办法可以解决这个问题？另外，还有另一种引用方式vh是calc-Safari上友好的吗？
推荐指数
解决办法
查看次数
使用 calc 和 vw 在 2 种字体大小之间进行线性缩放
是否可以使用calc()和vw单位的某种组合在两种不同的字体大小之间线性缩放？
示例：我给出的网页设计具有以下字体大小：
<h1>字体大小：18px @ 360px
<h1>字体大小：32px @ 1024px
如果我希望font-size使用单位随着浏览器宽度放大vw，数学非常简单（SCSS 语法）：
font-size: 18/360*100vw;=font-size: 5vw;
因此，基于 18px @ 360px 的字体大小，您将使用5vw. 然而，当浏览器达到 1024px 时：
1024*0.05 = 51.2px这就是 1024px 的大小<h1>，远远高于设计值32px。如果我将 font-size 设置为使用 32px 作为基础，则会出现相反的问题：font-size: 32/1024*100vw;= font-size: 3.125vw。现在字体会太小@360px；
那么问题又来了，是否可以font-size在 2 个不同断点处的 2 个字体大小之间线性缩放 a？是否可以使用某种组合或vw单元calc来实现这一目标。我试图计算出这样的方程，但我不确定这是否可能。
我一直在考虑尝试类似的事情：
font-size: calc(18/360*100vw * 1.01vw);或类似的东西，但显然这种类型的语法对于calc().
注意：我并不是在寻找简单的媒体查询解决方案，我只是增加字体大小@1024px。我正在寻找一种在所有分辨率之间平滑线性缩放的方法。
推荐指数
解决办法
查看次数
CSS 中视口宽度/高度的官方文档是不好的做法？
有时，在 CSS 中使用vw和vh测量值来制作响应式网页似乎非常有用
然而，我发现并且我亲自在一些不常使用的地方使用过它。
我从其他人那里听说有“官方文件”指出 VW 和 VH 在任何方面都可能是不好的做法，我想知道这是否属实。
一些例子说明它可能是不寻常或不好的做法（底部的一个）：
/* Background */
.backgroundDiv {
width: 100vw;
height: 100vh;
}
/* a Top Bar */
.divHeader {
width: 100vw;
height: 10vh;
}
推荐指数
解决办法
查看次数
为什么CSS高度是：100vh；规则超出移动设备上的视口高度？
为了使我的标题适合所有视口，我使用了经典的 CSS 规则height: 100vh;，它的工作方式类似于 charm\xe2\x80\xa6，除了在我的手机上。
实际上，屏幕底部的标题比视口高（比应有的高 20 像素或 30 像素）。由于此问题，标题底部的部分内容在移动设备上被隐藏。
\n我尝试使用 Chrome DevTools Console 修复该错误，但当我使用移动视图（所有设备）时一切正常。
\n问题似乎来自我手机上的浏览器地址栏（我使用的是 Chrome）。
\n我缺少什么？如何正确修复？
\n这里有 html：
\n<!DOCTYPE html>\n<html lang="en" dir="ltr">\n <head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1" />\n <title>Test</title>\n <link rel="stylesheet" href="style.css">\n </head>\n <body>\n <header>Lorem ipsum</header>\n <main>\n <p>Lorem ipsum</p>\n </main>\n </body>\n</html>\n这里是CSS：
\n@charset "UTF-8";\n\n/** RESET CSS **/\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}\n\n*{margin:0;padding:0;border:0;list-style:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}\n\nheader{\n height: 100vh;\n background: green;\n font-size: 22px;\n}\n\n推荐指数
解决办法
查看次数
检测视口单元(使用modernizr或普通js)并提供适当的样式表
我实际上有一个问题我试图解决3周后.我试图测试对vw单元的支持并在浏览器不支持单元时提供单独的样式表我阅读了modernizr教程并熟悉modernizr css检测但是测试vh单位(视口相对单位)是我在网上找不到的东西.
所以基本上:
场景1:浏览器支持vw单元然后提供样式表A.
场景2:浏览器不支持它然后提供样式表B.
我确实发现有一个名为Modernizr.cssvwunit的非核心检测,但老实说我不知道在这种情况下从哪里开始或如何使用.
如果你帮助我扩展我的知识会很棒.此外,如果它不是太费力,我可以研究一个例子的jsfiddle将是非常有帮助的.
此致
马库斯
编辑:为什么它只触发else语句？ http://jsfiddle.net/5saCL/10
<script>
if (Modernizr.cssvwunit) {
alert("This browser supports VW Units!");
} else {
alert("This browser does not support VW Units!");
}
</script>
javascript css3 modernizr viewport-units browser-feature-detection
推荐指数
解决办法
查看次数
如何在 jQuery 中使用 vh 单位获取文档高度？
$(window).scroll(function() {
$scrollingDiv.css("display", (($(window).scrollTop() / $(document).height()) > 0.1) ? "block" : "");
});
如何将单位更改$(document).height()) > 0.1)为 100vh？我没有太多的 jQuery 经验。
推荐指数
解决办法
查看次数
通过 vh 和 vw 调整 css 字体大小
所以我想根据容器的大小自动调整文本的大小。但是如果我使用类似的东西
font-size: 5vw;
看起来不错，但是当我缩小页面时，高度开始变得太小
无论如何，我是否可以根据 vh 和 vw 调整文本大小，例如，如果我只是减小页面的宽度，那么高度也不会减小？
就像如果我只减小页面的宽度，我希望文本的高度保持不变，反之亦然。
基本上，我希望文本始终完美地适合框内，并且无论页面/容器的大小是多少，都具有相同的比例？
无论如何，有没有像 CSS/HTML 中的 vh 和 vw 一样基于 vh 和 vw 的字体大小？
推荐指数
解决办法
查看次数
将页面分为两个垂直且相同的带边框部分
我目前正在尝试将页面分为两个相同的垂直部分，两侧各有一个边框。问题是我有两个宽度为49vw的部分；边框的大小为 1vw，等于 100vw，但各部分在彼此下方跳动而不是内联。我设置了一个 JSFiddle，以便更容易展示。这是与 JSFiddle 一起使用的代码。
.section1{
background-color:#11181e;
width:49vw;
float:left;
height:100vh;
border-right: 1vw solid #F5E5D6;
margin:0;
padding:0;
}
.section2{
background-color:#f1c40f;
width:49vw;
float:left;
height:100vh;
border-left: 1vw solid #000;
margin:0;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/reset.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/styles.css" media="screen" type="text/css" />
</head>
<body>
<!--SECTION 1-->
<div class="section1">
<p>2D</p>
</div>
<!--SECTION 2-->
<div class="section2">
<p>3D</p>
</div>
</body>
</html>这是链接： http: //jsfiddle.net/VfTYs/4/
推荐指数
解决办法
查看次数
为什么100vh不走全屏？
这是我第一次遇到此类问题。我正在尝试制作响应式导航栏。在一定宽度下，我希望我的导航链接 div 转到右侧栏。但即使在给出 100vh 后，导航链接 div 也没有占据整个视口高度。这是代码 -
超文本标记语言
<header>
<nav>
<div class="logo">Logo</div>
<div class="nav-items">
<li><a href = '#'>Link-1</a></li>
<li><a href = '#'>Link-2</a></li>
<li><a href = '#'>Link-3</a></li>
</div>
</nav>
</header>
社会保障体系
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: blue;
nav {
height: 65px;
max-width: 1340px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
padding: 1rem;
.logo {
font-size: 2rem;
color: black;
}
.nav-items {
li {
display: inline;
a {
color: black;
text-decoration: …推荐指数
解决办法
查看次数