1

画面の解像度に応じてページを調整します。たとえば、ズームイン時にスタックオーバーフローの 問題やcss レイアウトが歪むなどの問題があります。私のページがすべての解像度に合うようにしたいです。本文とフッターを含むページ全体に適用できる解決策を教えてください

HTML:

<div class="wrap">
    <div id="head">
        <div id="head_back">
        <b id="logo">LOGO</b>
        <div id="nav">
            <b>2000</b>
            <b>2001</b>
            <b>2002</b>
            <b>2004</b>
        </div>
        </div>
    </div>
</div>

CSS:

.wrapper{width:100%; background-color:red; overflow:auto; margin:0; padding:0;}
#head
{
    width:100%; height:100px; 
    color:#902df3;
    position:relative;
    top:-10px;
    left:-7.8px;
    font-family:"Arial Black", Gadget, sans-serif;
    padding-right:17px;

}
#head #head_back
{
    position:absolute;
    line-height:90px;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#999; background-size:cover; background-repeat:no-repeat; 
}
#head #logo
{
    font-size:46px;
    position:absolute;  
}
#head #nav
{
    font-size:26px;
    position:absolute;
    left:60%;   
}
body html
{
position: fixed;
width: 100%;
overflow:scroll;
}
4

4 に答える 4

1

まず、ビューポート メタ タグが必要です。

<meta name="viewport" content="width=device-width, initial scale=1.0"/>

次に、メディア クエリを使用できます。

@media only screen and (max-width: 320px) {
  ...
}

メディア クエリに関するこの優れたリソースを確認してください: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

于 2013-08-09T20:58:28.003 に答える
0

CSS ズーム機能をいじったり、単位を変更したりできます。詳細については、この投稿を参照してください。

CSS を使用して Web ページ全体をスケーリングするにはどうすればよいですか?

モバイル、タブレット、またはデスクトップでサイトが異なって見えるようにしようとしているだけの場合は、CSS でメディア クエリを使用し、定義された min-device-width でそれぞれをスタイリングすることをお勧めします。

于 2013-08-09T20:59:11.693 に答える
0

CSS ポジショニングは、Web デザインで最も嫌いな側面の 1 つです。残念ながら、それはたまたま重要なことでもあります。

問題を再現し、問題が何であるかを確実に確認するためのリンクや何かがなかったので、私の答えは主に推測になります.

問題の原因として最も可能性が高いのは、要素の絶対位置と相対位置が混在していることです。ブラウザのサイズが変更/ズームされると、相対要素が変更されるはずです。絶対配置要素はそうではありません。

わかりやすいガイドの 1 つ: http://www.barelyfitz.com/screencast/html-training/css/positioning/

また、Firefox プラグイン「Web Developer」と「Firebug」をインストールすることをお勧めします。これらのツールを使用すると、css 設定をオンザフライで変更して、実際に問題を引き起こしている可能性があるものをテストできます。

于 2013-08-09T21:00:19.623 に答える