2

可能这是一个愚蠢的问题（我是新手），但我正在开发一个带有 phonegap 的应用程序，并且对于我需要定义它的高度的任何设备。我知道使用 javascript 我可以使用以下方法获取屏幕大小：

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

我想在我的 CSS 文件中使用 screen.height 值作为变量。解决了这个问题后，我可以定义与高度相关的任何项目，因此我将在任何设备上获得准确的图像......听起来很奇怪？

我试图谷歌但我没有找到将js插入css或在其中插入screen.height值的方法。

有人有想法吗？

提前致谢。

4

4 回答 4

3

好的，我们来回答你的问题。

正如你所说，你可以这样做：

<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>

但是很难从 JavaScript 更改 css。相反，如果您使用 jQuery，则很容易做到这一点。以下代码可以帮助您：

<script>
$(document).ready(function(){

   var Width = $(document).width();
   $('#id_you_want_change').attr('width','valueYouWantToWidth');

});</script>

做得好！如果您想要一个负责任的网站，请尝试寻找像Bootstrap之类的框架并开心:)

于 2013-09-19T14:05:31.607 回答
2

在 Css 文件中使用 @media 来定义屏幕宽度和高度。查看此链接以获取更多信息 使用媒体查询的设备布局 - 手机上的肖像，平板电脑上

于 2013-09-19T13:58:36.110 回答
1

尝试使您的 css 尽可能灵活。将高度和宽度设置为百分比，而不是需要按比例缩小的固定值。例如，如果您需要制作一个按钮

.button {
    width:100%;
    padding:0.5em;
}

让填充和文本大小创建所需的高度。如果您需要更多定义，您可以按照 Alvaro 和 Vidya 所说的那样做，并使用媒体查询为某些设备尺寸设置固定值。

祝你好运！

于 2013-09-19T14:02:24.033 回答
1

看到这个答案，通常将js放入css被认为是不好的做法。相反，您可以做的是在必要时使用 javascript 为您做一些样式。你可能也想学习 jQuery，它让很多事情变得简单一百倍。

我知道这很模糊，但希望它有所帮助！

于 2013-09-19T14:03:51.530 回答