0

幅1000pxのサイトを作りました。レスポンシブにしたいのですが、メディアクエリがうまくいきません。

幅を 1000px に固定したまま、ブラウザが小さくなるにつれて Web サイトを縮小する方法はありますか? これまでのところ、メディアクエリは機能していないようです。

これは私のメディアクエリです:

リンク：

メディア クエリ:

@media screen and (max-device-width: 600px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12, .container {

    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    }

    #index, #about, #services, #contact .logo, ul, .slide, .headSub, .aboutContent, .aboutText, 
    .division, .service_buzzwords, .services-content, .serv, .contactPage, .map{
        float: none;
    }
    .nav ul, li, a{
        display: block;
    }
    .division, .aboutImg img{
        display: none;
    }
    .indexContent{
        width: 100%;
    }
    .rw-sentence { font-size: 1em; }
    img{
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media screen and (max-width: 320px){
    .rw-sentence { font-size: 0.5em; }
}

助けてください。ありがとう。

4

1 に答える 1

0

This is the best way to achieve the desired effect :

  • You create a wrapper DIV. You give that wrapper DIV a fixed width (in your case : 1000px) and - in a typical layout - center it.

  • Make sure your grid elements inside that wrapper DIV are percentage based. For example, if your first column is supposed to be 400px and your second column is supposed to be 600px, set them at 40% and 60%.

  • If you want to support older browsers, you'll need to add an additional child DIV to your grid elements for padding, margin and/or borders. If you don't need to support older browsers, border-box should do the trick.

  • When your website is smaller than a certain size, use a media query to set the width of the wrapper DIV at 100%.

You can, of course, also use a framework that implements this technique.

于 2014-01-07T20:23:49.850 に答える