Question

我知道我们可以写媒体查询。但是，如果我们需要一个属性来改变屏幕宽度范围，我们就可以做到。我的问题是我们可以将宽度设置为当前屏幕宽度的一小部分吗？

例如，width = 0.5 *当前大小，总是将宽度设置为当前宽度的一半？

Answer 1

我的问题是我们可以将宽度设置为当前屏幕宽度的一小部分

是的，使用视口单元

1vw =视口宽度的1/100。

MDN Reference

Support是IE9及以上

Answer 2

用于宽度使用vw其中100vw =视口宽度（浏览器窗口宽度）

高度使用vh其中100vh =视口高度

所以您想要使用width:50wh

了解更多信息，请点击此处 viewport units

Answer 3

尝试resize事件：

$( window ).resize(function() {
  var current_width = $(this).width();

  var new_width = current_width * 0.5;
  $( selector ).css('width' , new_width+'%');
});

Answer 4

当你得到小数像素时情况就会崩溃，但是如果你的百分比值产生整数像素值（例如示例中的200px的50.5％），你将会得到明智的预期行为。

例如

<div id="percentage">
   <div class="first">50%=100px</div>
   <div class="second">50.5%=101px</div>
   <div class="third">51%=102px</div>
</div>
<br />  
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>

#percentage 
{
 width: 200px;
 color: white;
}

#percentage .first 
{
 width: 50%;
 height: 20px;
 background-color: red;
}

#percentage .second 
{
 width: 50.5%;
 height: 20px;
 background-color:green;
}

#percentage .third 
{
 width: 51%;
 height: 20px;
 background-color:blue;
}

#pixels 
{
 color: white;
}

#pixels .first 
{
 width: 50px;
 height: 20px;
 background-color: red;
}

#pixels .second 
{
 width: 50.5px;
 height: 20px;
 background-color:green;
}

 #pixels .third 
{
 width: 50.6px;
 height: 20px;
 background-color:blue;
}

#pixels .fourth 
{
 width: 51px;
 height: 20px;
 background-color:red;
}

Answer 5

为什么不使用屏幕宽度的'％'

somecssselector{
   width:50%;
}

但它不适用于嵌套的一些绝对且相对定位的元素。在这种情况下，就像上面提到的答案一样，你必须使用'vw'

Answer 6

在你的例子中

只做

width: 50vw

它将始终占据当前屏幕的50％。如果你想在屏幕高度改变时也改变div高度，你甚至可以手动调整窗口的大小。只需添加：

height: 50vh

如果您想将div设置为占据所有屏幕，只需这样做。

{
   width: 100vw;
   height: 100vh;
}

有关vw或vh的定义，请转到https://developer.mozilla.org/en/docs/Web/CSS/length

我们可以根据屏幕宽度更改CSS属性，宽度吗？

6 个答案: