0

我正在学习响应式设计，我认为这对于简单的网络来说很容易并且很有用，所以我尝试重新构建我的网络以使其具有响应性。当我的网站启动时，我用 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 */

}

我该如何解决？

4

2 回答 2

0

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

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

和

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

这是jsFiddle预览。

于 2013-03-30T19:29:56.677 回答
0

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

于 2013-03-30T19:15:57.023 回答