如何将javascript变量组合到css

Question

我想用科尔多瓦 jquery 制作简单的应用程序，我想根据手机/平板电脑的屏幕宽度生成 div 的宽度。 我用这个得到了屏幕的宽度

var physicalScreenWidth = window.screen.width * window.devicePixelRatio;
var physicalScreenHeight = window.screen.height * window.devicePixelRatio;

问题是如何将屏幕宽度与我的 css 结合起来。

这是我的静态 css，我不知道如何将可变宽度组合到这个 css。 我手动创建宽度：300px、130px 等。当手机/平板电脑不同英寸时会出现问题..

.some {
margin-left:-10px;
    width:300px;
    height:130px;
    margin-bottom: 5px;
    background-color:#fff;
    border-width:1px;
    border-style:solid;
    border-bottom-color:#aaa;
    border-right-color:#aaa;
    border-top-color:#ddd;
    border-left-color:#ddd;

}

.one{
  float:left;
  width:130px;
  height:130px;
}
.three{
    width:170px;
  height:130px;
    position:absolute;
    left:140px;

}

.four{
  width:170px;
  height:70px;
}
.five{
  width:170px;
  height:60px;
}

HTML

<div class="some">
    <div class="one"><img class="bgr" src="1.jpg"></div>

    <div class="three">
        <div class="four"><p style="margin-left:10px;margin-top:2px;"><font face="arial" size="3"><b>Descc ...</b></font></p></div>
        <div class="five"></div>
    </div>
</div>

结果

Answer 1

您不需要将宽度值传递给 css。相反，css 本身可以测量它所应用的屏幕。 Media queries 是您的答案。 @media screen and (min-width: 768px) and (max-width: 1024px) 用于平板电脑，@media screen and (max-width: 768px) 用于手机。

Answer 2

jQuery

$(function(){
   var physicalScreenWidth = window.screen.width * window.devicePixelRatio;
   var physicalScreenHeight = window.screen.height * window.devicePixelRatio;
   $('.some').css({width:physicalScreenWidth });
})

CSS

.some{
   display:flex;
}
.one{
  flex:1;
}
.three{
  flex:1;
  display:flex;
  flex-direction:column;
 }

或者你可以使用媒体查询

@media screen and (max-width:600px){
   // write some css here
}

或使用 Bootstrap、Semantic、Bulma 等 css 框架

Answer 3

如果您可以使用简单的 jQuery，请使用：

$(".some").width(youtWidth);

编辑： 以同样的方式，您可以为您需要的每个元素设置宽度。查看以下代码，.some 和 .one 元素的宽度设置为视图宽度的 33%。

var viewWidth = $(window).width();
$(".some").width(viewWidth * 0,33);
$(".one").width(viewWidth * 0,33);