我在我的一个项目中使用了vh(视口单元)css但在移动safari中它不起作用.似乎Safari不知道如何处理vh,但它在其他浏览器中工作正常.无论有没有,我想做同样的效果,请帮助我.顺便说一句,我正在使用facebox.(身高:50%不能正常工作)
HTML:
<div id="facebox" style="top: 0px; left: 0px; display: block;">
<div class="popup">
<div class="body">
<div class="content_light">
<div class="Lcontent_left"></div>
<div class="Lcontent_right">
<div class="Lright_content"></div>
</div>
</div>
</div>
</div>
</div>
这是我的css:
#facebox .popup {
display:block;
position:relative;
margin:auto;
margin-top:0%;
min-height:100vh;
height:1px;
border-radius:5px;
}
#facebox .body {
padding:0px;
display:block;
position:relative;
background: #fff;
width:100%;
min-height:100vh;
height:1px;
margin:auto;
border-radius:5px;
}
.Lcontent_left{
position:relative;
float:left;
width:100%;
height:50vh;
/*min-height:250px;*/
text-align:center;
overflow:hidden;
}
.Lcontent_left_fullscreen{
display:none;
}
.Lcontent_right{
float:left;
text-justify:inter-word;
position:relative;
width:100%;
height:50vh;
background-color:white;
overflow:auto;
font-family:"Open Sans",Helvetica,sans-serif;
}
.Lright_content{
position:relative;
width:95%;
margin:auto; …我有一个元素的最大高度为65vh.我需要将它转换为我的JavaScript中的像素,以查看图像是否适合那里或者我是否需要缩小/裁剪它.(我正在做win8 App开发).
这会有用吗？
100 vh = screen.height因此像素为65vhscreen.height *0.65
我正在申请min-height: 100vh;一个flexbox容器,当我使用时,我得到一个垂直滚动条justify-content: space-around;
我不想强制高度,但我不明白为什么滚动条在那里,因为内容的尺寸小于视口.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet"/>
<div class="wrapper">
<div>
<h1>min-height: 100vh;</h1>
<h2>why is there a scrollbar here?</h2>
</div>
<div>
Be sure to expand window.
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
<a href="#">skill one</a>
</div>
</div>我正在尝试将图像居中在div中,其尺寸设置为vh.我尝试使用display:table-cell;以图像为中心的方法,但开始搞乱其他元素的大众.我想知道是否有另一种更简单的方法将这个图像垂直居中在一个div中,如同vh.我知道这可能有点令人困惑,所以希望我的代码可以提供帮助!
HTML:
<div class="graphic" style="background-color:#ff837b">
<img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>
CSS:
#induoIntro .graphic {
display:block;
height:100vh;
}
如何解决单位不兼容的问题？
@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。
在我的情况下，我想要一个 mixin 来平方元素的大小。包括夹子。
min-width、max-width等不起作用。它将是一个矩形或一个椭圆。因为它没有保持纵横比。我想用一个动态元素size，但与min和max大小。
我知道vw在 sass 编译后必须存在动态单元（视口）。因此，无法将该值转换为固定单位。但是就没有办法了吗？
我认为使用相关单位开始我的新项目是个好主意.当我正在研究它时,我正在检查chrome仿真,以确保一切在这些设备上运行良好,并且它看起来很好.
然后我把它推到了heroku,它在我的Macbook上看起来很不错,但是当我真的将它加载到我的iPad上时,我想把它扔出窗外......
#bannerTop {
position:relative;
text-align: center;
width:100vw;
height:70vh;
min-height: 70vh !important;
max-height:70vh !important;
background-image: asset-url('skycloudsalpha.jpg');
background-repeat: no-repeat;
background-position: 50% 75%;
z-index:-1;
}
我正在使用VH单位.我怀疑这可能是问题所在？
可能还有一些其他潜在问题,但我不确定如何调试我的问题,因为在模拟器上一切都很好,但在设备本身上却没有.我现在花了大约三个小时,非常感谢一些帮助.
谢谢!
我正在使用Plotly-Dash并且需要我的文本注释的字体大小来缩放视口宽度,就像我的图形那样.对于我的布局不同的头,我能够直接设置font-size: '1vw',但vw不是用于设置的接受单元font-size的style一个属性dcc.Graph分量.这是相关的追溯:
ValueError:为scatter.textfont的'size'属性收到的元素无效.无效元素包括:['1vw','1vw','1vw','1vw','1vw','1vw','1vw' ,'1vw','1vw','1vw']
Run Code Online (Sandbox Code Playgroud)The 'size' property is a number and may be specified as: - An int or float in the interval [1, inf] - A tuple, list, or one-dimensional numpy array of the above
我认为如果dcc.Graph组件可以接受视口单元(例如style = {height: 30vw, width: 30vw})并简单地将它们转换为浏览器侧的像素,那么我应该能够执行类似的转换font-size.
在Python端有没有办法以像素为单位检索视口宽度,这样我就可以为字体大小执行自己的缩放逻辑？
以下是演示此行为的示例Dash应用程序:
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
labels …我有一个非常简单的情况,我想在其中设置一个容器元素80vh,然后将内部div设置为该高度的100%.在Chrome上,这将正确呈现,但在Safari上,内部元素没有100%的80vh高度.
.container {
background-color: red;
width: 100%;
height: 80vh;
}
.inner {
height: 100%;
background-color: blue;
}
这是一个显示这个问题的小提琴:http://jsfiddle.net/neilff/24hZQ/
在Chrome上,元素为蓝色,在Safari中为红色.如果没有应用div 80vh的高度,是否有解决此问题的方法.inner？
不幸的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]], …