javascript - 我如何将 jquery-div 的创建更改为其他方法

Question

我对几乎所有网络技术都很陌生，目前我正在练习它们。

在我的新练习页面上，我创建了几个这样的东西(根据视口(viewport)高度更改 div 高度):

<script>
<!--
 document.write('<div class=\"head\" id=\"head\" style=\"height:'+viewportheight/6+'px\">');
//-->
</script>
</div>

我知道这是糟糕的代码。但它有效。 不幸的是，由于某些原因，jquery 方法 .css 不起作用。我包含了 code.jquery.com/jquery-1.10.2.js，但是这个没有任何作用:

$( 'body' ).css( {
    'width'   : viewportwidth + 'px',
    'height'  : viewportheight + 'px'
} );

我确信高度和宽度的两个变量在它们内部有值——我可以使用 document.write() 输出它们。我也尝试过使用常量值 - 没有效果。

所以，请您描述一下我如何创建具有动态值的 div 而无需每次都使用脚本标签，或者我应该如何以正确的方式使用 .css 方法？

谢谢你，祝你假期愉快!

Answer 1

On my new practice page i`ve created several things like this (to change div height according to the viewport height)

为什么要为此使用 jQuery 或 Javascript？？？ 你可以像这样通过 css 简单地做到这一点:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
 /* style goes here
 ...
*/
}

在 Web 开发中，你总是可以通过 jquery 或 JavaScript 实现所有的 html 样式，如果不是 css......但是将它用于基本样式或浏览器视口(viewport)是一种矫枉过正......( >喜欢用导弹代替枪来达到你的目的 )

在这里阅读更多内容

• > http://css-tricks.com/resolution-specific-stylesheets
• > http://css-tricks.com/css-media-queries/
• > http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

编辑:(宽度)

要了解媒体查询的工作原理， check this fiddle

@media screen and (max-width : 1500px) {
    body {
        background: grey;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width:800px) {
    body {
        background: red;
        border-top: 2px solid #DDDDDD;
    }
}
@media screen and (max-width:400px) {
    body {
        background: black;
        border-top: 2px solid #DDDDDD;
    }
}

更改浏览器视口(viewport)宽度以查看主体颜色的变化....以类似的方式您可以分配不同的 div，它们的样式

编辑(高度)

demo here

html, body {
    /* set universal style */
    background-color:grey;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
@media (max-height:600px) {
    body {
        background-color:red;
    }
    @media (max-height:400px) {
        body {
            background-color:yellow;
        }
        @media (max-height:200px) {
            body {
                background-color:black;
            }
        }