CSS3 100vh 在移动浏览器中不恒定
我有一个非常奇怪的问题...在每个浏览器和移动版本中我都遇到了这种行为: 所有浏览器在您加载页面时都有一个顶部菜单(例如显示地址栏)，当您开始滚动页面时会向上滑动. 100vh 有时仅在视口的可见部分计算，因此当浏览器栏向上滑动时，100vh 会增加(以像素为单位) 由于尺寸发生变化，所有布局都重新绘制和调整 对用户体验的不良影响 如何避免这个问题?当我第一次听说 viewpor
..
viewport-units相关内容
视口单位字体大小和缩放错误:哪些浏览器受到影响?
当缩放级别未设置为 100% 时，桌面 IE10 似乎无法正确缩放以视口单位设置字体大小的文本.我试图找出受此影响的 IE 版本(以及可能的其他浏览器).请在您的浏览器中尝试此示例并报告您的发现:
..
Flex-box 100vh 在移动 safari chrome 后面延伸 - 是否有任何已知的技巧或解决方案
Flex-box 100vh 在移动 safari chrome 后面延伸 - 有任何已知的技巧或解决方案吗?- 或者是好得令人难以置信? 我经常想要一个“模态"类型的封面 div，或者一个用于简单的一键 UI 屏幕的全屏图像.我使用 flex-box 越多，我就越不能指望我的一些旧技术.当涉及到 100% 高度时，我通常会采用的方法是: html, body {高度:100%；} HT
..
CSS3 100vh 在移动浏览器中不是恒定的
我有一个很奇怪的问题......在我遇到过这种行为的每个浏览器和移动版本中: 当您加载页面(例如显示地址栏)时，所有浏览器都有一个顶部菜单，当您开始滚动页面时，该菜单会向上滑动. 100vh 有时仅在视口的可见部分计算，因此当浏览器栏向上滑动时，100vh 增加(以像素为单位) 由于尺寸发生变化，所有布局都重新绘制并重新调整 对用户体验的不良跳跃效果 怎样才能避免这个问题?当我第
..
使用大众单元的文本不起作用
我希望使用 VW 单位来调整我的排版大小，但这样做时文本很大并且明显大于视口宽度.本质上，我希望我的文本在父 .container 中具有响应性，因此文本永远不会像使用 px 或 em 这样的静态大小单位那样被裁剪或溢出? HTML
响应式排版！
CSS .container {宽度:100%；背景:红色；高度:100%；}h1{字体大小:40vw；} 小提琴
..
在移动 Chrome 上调整字体大小的大众马车
我正在开发一个网站，其桌面版和移动版的 CSS 代码略有不同.在移动设备上，我使用 vw 单位作为响应式字体大小，这比媒体查询更受欢迎，因为移动设备屏幕大小每隔一年都会变化，而不同的方法需要我每次都更新媒体查询. 现在，我想我在 Chrome 移动版中发现 vw 的字体大小有问题. 我诚挚地邀请您使用 Firefox 和 Chrome 在移动设备上查看这两个页面:http://gust
..
为什么字体大小的大众汽车无法在野生动物园工作?
我使用vw作为字体大小的单位，因此在调整浏览器大小时看起来会很好. 但是，当我在Safari中浏览内容时，内容就会运行，有人知道如何解决吗?谢谢 CSS .flatNav { background-image: url(../img/navBar.png); background-repeat: repeat-x; width: 90%; margin-
..
使用100vw和vh会创建超出视口大小的额外空间.我如何摆脱它?
尝试在div上使用100 vw和100vh制作全屏框架.我在此JSfiddle 中有2个，并且您可以看到底部和底部都有额外的空间.每帧的右侧. 有没有一种方法可以使用vw和vh并使其完美契合而无需额外的空间? css看起来像这样: .f1 { width: 100vw; height: 100vh; background-color: blue; } .f2 { width:
..
视口单位vw/vh/vmin/vmax不缩放吗?
根据如何正确使用CSS -values viewport-relative-lengths?，我尝试通过以下方式使用视口单位，以自动放大大型显示器上的一个小页面: /* automatically magnify business-card-style page in large viewports */ @media (min-width: 50em) and (min-height: 6
..
SASS:不兼容的单位:"vw"和"px"
如何解决单元不兼容的问题? @mixin square-size($size, $min: $size, $max: $size) { $clamp-size: min(max($size, $min), $max); width: $clamp-size; height: $clamp-size; } 输入为: @include square-size(10vw, 4
..
VH单元行为不一致
我有一个伪元素出现在鼠标悬停上: height: 0.4vh; 高度不变，只有宽度不变.但是，由于某些原因，在某些情况下，不同伪元素的高度会有所不同(此处两条较暗的线都具有height: 0.4vh): 我举起这个小提琴来演示，但是意识到是否会发生这种怪异取决于视口高度: https://jsfiddle.net/vuw693La/ 我在Chromium和Firefox上遇到
..
通过vh和vw调整css字体大小
所以我有一些要根据其容器大小自动调整大小的文本.但是，如果我使用类似的东西 font-size: 5vw; 看起来不错，但是当我缩小页面时，高度开始变得太小 无论如何，我是否可以同时基于vh和vw调整文本的大小，例如，如果我只是减小页面的宽度，高度也不会减小? 就像我只减小页面的宽度一样，我希望文本的高度保持不变，反之亦然. 基本上我希望无论页面/容器的大小如何，文本都
..
缩放div宽度取决于高度
..
IE11中不兼容Flexbox和vh高度单位吗?
我正在尝试使用基于Flexbox的布局来为页面添加粘性页脚.这在Chrome和Firefox中效果很好，但在IE11中，页脚位于我的主要内容之后.换句话说，主要内容不会被拉伸以填充所有可用空间. body { border: red 1px solid; min-height: 100vh; display: -ms-flexbox; display:
..
视口单位的字体大小和缩放错误:哪些浏览器受到影响?
当缩放级别未设置为100％时，桌面IE10似乎无法正确缩放其字体大小以视口单位设置的文本.我试图找出受此影响的IE版本(可能还有其他浏览器). 请在您的浏览器中尝试以下示例并报告您的发现:
..
使用vh的布局无法缩放
我尝试仅使用vh大小来创建登录表单. 这样做是为了希望该表单总体上可以相应地缩放到视口. 不是！出于某种原因，在输入字段和下面的文本之间，会创建一个空白区域，随着您放大的程度的增大，该空白会不断变大. http://jsfiddle.net/TnY3L/ 小提琴制作得不是很好，只是从我的项目中复制了它. 但是，您可以看到出了什么问题-这才是最重要的. 有人对我要如何解决这个
..
如何实现最大字体大小?
我想使用vw指定我的字体大小，如 font-size: 3vw; 但是，我也想将字体大小限制为36px.如何获得与max-font-size不存在的等效项?这是使用媒体查询的唯一选择吗? 解决方案 font-size: 3vw;表示字体大小为视口宽度的3％.因此，当视口宽度为1200px时-字体大小将为3％* 1200px = 36px. 因此，使用单个媒体查询覆盖默认的3
..
是否可以在不使用滚动条的情况下计算视口宽度(vw)?
如标题中所述，是否可以仅在css中没有滚动条的情况下计算vw? 例如，我的屏幕的宽度为1920px. vw返回1920px，太好了.但是我的实际身高只有1903px. 我是否有办法仅使用css检索1903px值(不仅用于body的直接子级)，还是为此我绝对需要JavaScript? 解决方案 一种方法是使用calc.据我所知，100％是包括滚动条的宽度.因此，如果您这样做:
..
如何将Sass函数转换为更少?
有人知道如何在Less中重新创建下面的Sass函数吗?我希望能够轻松转换任何CSS属性内的单位(例如:字体大小，边距，填充等). ass: @function get-vw($target) { $vw-context: (1440 * 0.01) * 1px; @return ($target / $vw-context) * 1vw; } CSS: sel
..
vw和vh单元如何工作？
我想知道如何计算 vh 和 vw 的值。我正在设计一个使用 2vw 的网站，它的工作完美适用于我的文本。但是，我只是猜测。请告诉我这些单元如何工作，以便将来使用它们。我还想知道他们是否已经跨浏览器支持。 解决方案 vw 和 vh 分别是窗口宽度和高度的百分比：100vw是宽度的100％，80vw是80％等。 要计算以像素为单位的值，您只需执行以下操作： vwToPx =函数（
..