0

私はレスポンシブデザインを学んでいます。これは単純な Web では簡単で便利だと思うので、Web をレスポンシブに再構築しようとしています。Web が起動したら、効果を出すために 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 screenscreen 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 に答える