用jQuery为vh中设置的元素左侧属性添加/减去固定值
我有以下代码: html: CSS: #my-div{ display: none; position: absolute; left: 150vh; bottom: -150px; } jQuery: $.fn.vhLeft = function(property,unit){ var wpx = this.css(property).replace(/[^0-9]+/g,""); var temp = $(' ').css({ left:'1'+unit, position: 'absolute' }); $('body').append(temp); var oneEm = temp.css(property).replace(/[^0-9]+/g,""); temp.remove(); var value = wpx/oneEm; return (Math.round(v
6 2024-01-18
编程技术问答社区
元视口和宽度=设备宽度与百分比固定
我试图确保我正确理解元视口标签在设置宽度=设备宽度时的工作方式. 是否是正确的说法,在使用 的移动设备上工作 使用像素单元的用法是(或应该)被视为像在320像素宽的网格上一样?即具有宽度的元素:160px将占据屏幕的(160/320 = 50%)? 在桌面浏览器上运行时,此行为似乎不起作用, 因此,假设我想在移动和桌面上获得相同的设计,我应该/应该/是否可以使用百分比或vw/vh单位? 解决方案 要意识到的第一件事是CSS像素和设备像素不是同一回事.在CSS中将某些内容设置为width: 160px时,像素的数量与CSS像素有关,这与设备的实际像素无关. 移动浏览器(在合理的现代智能手机上)创建了一个"假"视口,该视口模拟桌面宽度浏览器尺寸,也可以放大,以便
4 2023-11-19
编程技术问答社区
视口单位,保持长宽比?
所以我刚刚发现了视口单元,我真的想使用它们. 第一个挑战:我的元素的"基本大小"为760x670像素.我想使用视口单元进行扩展,以使高度为100vh,或者宽度为100vw,以较小者为准. 不幸的是,尽管我可以使用100vmin来使两者中的较小,但我只能将其应用于宽度或高度,而不是两者. 目前我正在使用: #root { width: 760px; height: 670px; width: 100vw; height: calc(670vw/760); } 这将缩放宽度以适合屏幕,从而导致垂直滚动.这还不错,但是如果我真的可以让视口符合视口,我会更喜欢它. 解决方案 我已经在IE10中工作了: #elem { width: 100vw; height: calc((9/16)*100vw); } @media (min-aspect-ratio:16/9) { #elem {
6 2023-11-19
编程技术问答社区
使用vh的布局不随缩放比例变化
我尝试仅使用vh尺寸创建登录表单. 这样做,希望形式总共可以相应地扩展到视口. 不是!由于某种原因放大,创建一个空白的空间,在输入字段和下面的文本之间缩放越多,可以越来越大. . http://jsfiddle.net/tny3l/ 小提琴制作不是很好,只是从我的项目中复制了它. 但是您可以看到出了什么问题 - 这就是重要的. 有人知道我该如何解决这个问题? OK!
2 2023-11-19
编程技术问答社区
使用大众汽车单元的文本不工作
我希望使用大众单元来尺寸我的版式尺寸,但是在这样做时,文本很大,显然比视口宽度大.从本质上讲,我希望我的文本在父母中响应.包含,因此文本从未像使用px或em? 这样的静态尺寸单元那样被裁剪或溢出. html Responsive Typography! CSS .container { width: 100%; background: red; height: 100%; } h1 { font-size: 40vw; } fiddle 解决方案 您的小提琴渲染正确. font-size,从经典上讲,提到了大写字母的宽度.让我们现在继续.* 1vw是视口宽度的1%. 因此,font-size: 40vw大致表示"渲染此文本,因此大写字母M的宽度将是视口宽度的40%".换句话说,每个角色都会很大. 它不会闯入新的行,因为这是一个单
2 2023-11-07
编程技术问答社区
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, 40px, 70px); 问题: Incompatible units: 'vw' and 'px'. node_modules\@ionic\app-scripts\dist\util\helpers.js:253.replace(/&/g, '&') 但是,如果我使用calc(1vw - 1px)它可以正常工作. (没有单位问题). 例如max(calc(1vw - 1px))不起作用.因为no number for max. 在我的情况下,我想要一个混合蛋白来平衡
20 2023-10-30
编程技术问答社区
在css3中,使用calc()以vh和vw进行垂直居中。
在必须广泛使用的情况下,使用vh用于div的高度,然后使用vm用于字体大小. CSS3 div.outer { height: 20vh; } div.inner { font-size: 3vw; height: auto; } div.inner2 { font-size: 2vw; } html-情况1 center me! HTML-情况2 center me top! center me bottom! 有什么方法可以使用calc()和其他css3属性在div.outer? 内垂直居中div.inner 解决方案 如果仅使用一行,则可以使用line-height: 20vh;. http://jsfiddle.net/jxu2t/ 其他
12 2023-10-04
编程技术问答社区
为什么 100vh 不能全屏显示?
这是我第一次解决这种类型的问题.我正在尝试制作响应式导航栏.在一定宽度上,我希望我的NAV链接Div转到右侧栏.但是,即使在给出100VH之后,NAV Links Div也没有达到完整的视口身高.这是代码 - html Logo Link-1 Link-2 Link-3 scss * { padding: 0; margin: 0; box-sizing: border-box; } header { background: blue;
18 2023-08-21
编程技术问答社区
字体大小在移动Chrome上有问题
我正在开发一个网站,该网站的CSS代码略有不同,用于桌面和移动设备.在移动设备上,我使用vw单元进行响应式字体大小,这比媒体查询更优于媒体查询,因为移动屏幕尺寸每隔一年更改,并且一种不同的方法将要求我每次都更新媒体查询. 现在,我认为我在Chrome Mobile中发现了带有vw字体尺寸的Chrome Mobile行为. 我邀请您在移动设备上查看这两页,包括Firefox和Chrome: firefox在镀铬时正确显示了字体大小: 字体大小在整个页面中是错误的 第一页的页脚上的字体大小与第二页不同(如预期,在Firefox上的两个页面上的页脚相同) 我在这里错过了一些东西,还是Chrome不能很好地处理大众? 如果这不是我遇到的明显编码错误,我可能会提交错误,但是我需要确认之前. 以vw对页脚声明为例: footer address div { display: block; font-size: 3vw !importan
12 2023-08-09
编程技术问答社区
视口单位vw/vh/vmin/vmax是否不适合缩放?
按照如何正确使用CSS - 值与视口相关的长度?,我尝试使用以下方式使用视口单元,以自动在大型监视器上放大一个小页面: /* 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中的一个错误/功能,要Zoom立即停止使用上述代码,还是通过设计和规格? ? 解决方案 按照定义,vw/vh/vmin/vmax是与视口宽度有关的单位: 大众相对于视口宽度的1% VH相对于视口高度的1% VMI
38 2023-08-09
编程技术问答社区
视口单位字体大小和缩放错误:哪些浏览器受到影响?
似乎没有正确缩放其字体大小在视口单元中设置的字体大小的文本,当缩放级别设置为100%时.我正在尝试找出哪些IE版本(以及其他浏览器)受到影响. 请在浏览器中尝试此示例并报告您的发现: DIV:first-of-type {width: 32px; height: 32px; background-color: blue;} DIV:last-of-type {width: 3.125vw; height: 3.12vw; background-color: red;} P:first-of-t
8 2023-08-09
编程技术问答社区
如何使div在浏览器中占据100%的视口高度
我有一个div标签,我意识到它没有像应有的那样填充100%的高度. 我的代码: #container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } 发生了什么事? 好吧,如果我只有此代码段,我将DIV放置在视口上的100%!问题是,我不仅在页面上有此代码,我还有更多的东西,我将此代码部分插入了身体标签中,在身体标签内有某个"位置",也就是说,我插入了一些元素,在这些元素具有此div之后,但它不占据观察口观察它是如何的 页面上的结果如何? 我滚动了页面,但是我的DIV仍占据整个视口的100%.我不正确吗?如果应该发生这种情况,为什么不发生? 说明:,我发现了这个问题,但我不知道该如何解决,好吧,这是事实,当它具有元素时,D
50 2023-05-16
编程技术问答社区
出现垂直滚动条时使用vw单位的问题(WordPress中的全宽元素)
我正在研究WordPress主题,并希望使用户在其中使用全宽块.为此,我使用以下HTML/CSS结构(减少为基本问题). (注意:尽管这是针对WordPress主题,但问题本身与WordPress无关,而是"仅" CSS问题,因为我甚至可以在SO SOIPET中使用非常基本的结构来重现它) * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } .content { width: 100%; max-width: 400px; margin: 0 auto; overflow-y: visible; background: #eee; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #ccc; }
26 2023-04-12
编程技术问答社区
Flex-box 100vh在移动Safari chrome后面延伸,是否有任何已知的技巧或解决方案?
Flex -Box 100VH在移动野生动物园铬的后面伸展 - 是否有已知的技巧或解决方案? - 还是真是太好了? 我经常想拥有一个"模态"类型的盖div,或用于简单的一个按钮UI屏幕的全屏图像.我使用flex-box越多,我就越能指望一些旧技术.我通常在100%高度时遇到的骇客是: html, body { height: 100%; } html和身体没有明确的高度...并且不知道它们是什么高度.为了告诉任何孩子有多"高",他们需要知道父母的身高. ,这可能会变得很混乱. 100vh View-Port高度将这个嵌套问题从方程式中取出,但是在移动浏览器上,对于如何发挥作用的看法似乎有所不同.在iOS Safari中,vh将包括其在其底部放置的Meddlesome UI棒的区域.由于感知到的偏移,当您尝试滚动时,居中的元素不会居中,并且一切都会拧紧,笨拙并感到骨折. 我可以使用Modernizr检查触摸,但这是一个不可取的位置.在某些情况下,我可以为H
10 2023-03-28
编程技术问答社区
如何将Sass函数转换为Less?
有人知道如何减少以下SASS功能吗?我希望能够轻松地转换任何CSS属性中的单元(例如:字体大小,保证金,填充等). sass: @function get-vw($target) { $vw-context: (1440 * 0.01) * 1px; @return ($target / $vw-context) * 1vw; } CSS: selector { font-size: get-vw(20px)vw; } sass来自这里: 解决方案 更新答案: AS 7次 - 马克斯在下面的评论中提到,他创建了一个很棒的自定义较少插件,使我们能够以较少的(是的,返回值)编写功能并在规则中使用它们. 要使我们使用此插件,我们必须首先通过执行以下命令来安装插件: npm install -g less-plugin-functions 下一步是我们编写自定义功能.执行此操作的语法首先将功能包装在名为.function
28 2023-03-04
编程技术问答社区
使用JavaScript/JQuery在页面加载时将相对/视口尺寸转换为固定尺寸
希望您过得愉快.我目前正在开发一个网站,其中几乎所有测量值(字体尺寸,填充,保证金,宽度,高度等)都使用视图单元和VH. 进行. 我使用这些单元,因为它们最好使页面看起来像我在不同的屏幕分辨率上想要的,与像素尺寸不同. 我想知道是否有可能,是在页面加载后,获取所有这些测量值的非相关值(例如,如果我说1VW,并且我的屏幕为1000px,则非相关值应为10px)并用这些纸上替换我的CSS3表上的相对值.这听起来可能很荒谬,但是我的意思是允许用户放大和从页面上缩放,并实际上放大或缩小.目前,无论用户的缩小是什么样的,该页面都保持不变,除了我拥有的重复图像. 我想在JavaScript中执行此操作,因为由于我的Java起源,我最了解HTML客户端脚本的语言. 另外,也许有一个我不知道在放大时简单地忽略相对值的功能?如果是这样,请告诉我. 解决方案 那将是这样的(在Chrome和IE中进行了测试);它适应页面加载和重新加载的视口,但不适合后续的视口大小和变焦.
8 2023-02-11
编程技术问答社区
VW和VH单元是如何工作的?
我想知道如何计算vh和vw的值.我正在设计一个使用2vw的网站,并且它适用于我的文本.但是,我只是猜想了.请告诉我这些单元如何工作,以便将来可以使用它们.我也想知道他们是否有交叉浏览器支持. 解决方案 vw和vh分别是窗口宽度和高度的百分比:100VW是宽度的100%,80VW为80%,等等. 要计算像素中的值,您只需执行 之类的事情 vwToPx = function(vwValue) { return $(window).outerWidth()/100*vwValue; } 您应该意识到的一件事是,Mobile Safari仍然渲染vh错误,除了最近的Android浏览器外,其他任何东西都无法处理任何一个单元.请参阅 caniuse . 有关更多信息,您可以查看在CSStricks上的这篇文章. com.
40 2023-01-31
编程技术问答社区
检测视口单位(用modernizr或普通js)并提供适当的样式表
我实际上有一个问题自3周以来我都在尝试解决.我试图测试对大众单元的支持,并在浏览器不支持该单元时提供单独的样式表 我阅读了现代化的教程,并且熟悉现代化的CSS检测,但是对VH单元(视口相对单元)进行测试是我在网上没有找到的东西. 基本上: 方案1:浏览器支持大众单元,然后服务样式表A. 方案2:浏览器不支持它,然后提供样式表B. 我确实发现有一个非核心检测称为Modernizr.cssvwunit,但老实说,我不知道在这种情况下从哪里开始或如何使用. ,如果您帮助我扩大自己的知识,那就太好了.另外,如果它不太费力,那么我可以研究的例子将非常有帮助. 真诚的, 马克斯 编辑:为什么只发出其他语句? http://jsfiddle.net/5sacl/5sacl/10 if (Modernizr.cssvwunit) { alert("This browser supports VW Units!");
24 2023-01-23
编程技术问答社区
Flexbox和vh高度单位在IE11中不兼容吗?
我正在尝试使用基于Flexbox的布局来为我的页面获取粘性页脚.这在Chrome和Firefox中效果很好,但是在IE11中,页脚坐在我的主要内容之后.换句话说,主要内容并没有扩展以填补所有可用空间. body { border: red 1px solid; min-height: 100vh; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } header, footer { background: #dd55dd; } main { background: #87ccfc; -ms-flex: 1 0 auto;
18 2022-11-30
编程技术问答社区