0

私は CSS が初めてで、ブラウザーの画面サイズによって変更できる相対的なレイアウト設計が可能かどうか疑問に思っていますが、Liquid にはなりません。

たとえば、ユーザーが画面ページを最小化しても、すべてがフルスクリーンと同じレイアウトのままになります。これが可能かどうかはわかりませんが、私が持っているのはフルスクリーン形式で完全に機能する相対的なレイアウトですが、ユーザーがページを最小化またはサイズ変更すると、すべての画像とテキストも最小化されますが、これは img( s）しかし、ページのサイズを変更するとナビゲーションメニューがひどく見えることにも影響します.それを止める方法はありますか？

4

3 に答える 3

2

CSS3 メディア クエリを使用できます。

http://www.w3.org/TR/css3-mediaqueries/

于 2012-05-09T19:12:05.333 に答える
1

あなたが話していることは「レスポンシブデザイン」と呼ばれています。

この良い例が必要な場合 (また、出発点としても優れています)、Bootstrap ( http://twitter.github.com/bootstrap/ ) をチェックしてください。

上部のメニューを見て、ビューポートを小さくするとどうなるかを見てください (ウィンドウのサイズを変更してください)。

編集：

彼が求めているのは、幅に関しては「サイズ変更」できますが、要素が高さに関してはつぶれないようにすることができるかどうかだと思います。彼の JSFiddle はパーセンテージの高さを使用していました。

.row_1
{
    background-color: green;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:30px;
    cursor: pointer;
    z-index: 20;
}
.row_2
{
    background-color: gray;
    position: relative;
    width: 100%;
    height:100%;
    padding: 30px 0px;
}

.row_3 {
    background-color: black;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:30px;
    z-index: 20;
    color: #fff;
}

ここに役立つかもしれない更新された JSFiddle がありますか?

http://jsfiddle.net/xBaTN/

于 2012-05-09T19:15:18.493 に答える
1

あなたがしようとしているように見えるのは、コンテナのサイズを最小幅に制限して、ブラウザの横でサイズが変更されないようにすることです。これを実現するために、 min-width CSS プロパティを使用できます。

<!-- Document -->
<div id="site-wrapper"></div>
<!-- Document -->

プロパティはそのまま使用する必要があります

#site-wrapper { min-width: 1000px; /*For example*/ }
于 2012-05-09T19:11:26.650 に答える