响应 jquery 改变宽度

Question

我正在学习响应式设计我认为这对于简单的网络来说很容易并且很有用，所以我尝试重新构建我的网络以使其具有响应性。当我的网页启动时，我使用 javascript 更改宽度以产生效果。

我的问题是，当我使用 javascript 更改宽度时，我的响应式 css 不起作用。

例如当我这样做时：

$(document).ready(function() {  
    $('#content').width(800);
}

我的 CSS 不起作用：

/* Media Queries */
@media screen and (max-width: 480px) {

#content
{
    /*height: 450px;*/
    width: 100%;
    background-color: rgba(0,0,0, .1);
    position: relative;
    margin:20px auto;
    z-index: 0;
    left: -10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px;
    color: rgb(90, 90, 90);


    transition-timing-function: cubic-bezier(0.42,0,1,1);
    -moz-transition-timing-function: cubic-bezier(0.42,0,1,1);
    -webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);
    -o-transition-timing-function: cubic-bezier(0.42,0,1,1);

    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */

}

我该如何解决？

Answer 1

您的媒体查询正在查看浏览器的窗口宽度，而不是 div 的宽度。因此，您必须调整浏览器窗口的大小（这在现代浏览器中使用 JavaScript 是不可能的）。

Answer 2

media screen 是屏幕宽度的条件，如果screen width > max-width css 不起作用。

max-width:480px; /* is for Smartphones (portrait and landscape) */

和

max-width:1224px; /* is for Desktops and laptops. */

这里是jsFiddle 预览。