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预览。

响应jquery改变宽度

2 个答案: