android - 如何将javascript变量组合到css

Question

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

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

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

这是我的 STATIC 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 screen and (min-width: 768px) and (max-width: 1024px) 用于平板电脑，@media screen and (max-width: 768px) 用于手机.