2

HTML で、Web ページをユーザーのモニターに拡大する方法はありますか? たとえば、私は 15 インチを持っていますが、他の人は 24 インチを持っています。Web ページは画面上では小さくなりますが、最小サイズに収まります。ページを 100% または 95% に拡張するにはどうすればよいですか?

4

8 に答える 8

3

流体幅は、パーセンテージ単位またはem単位を使用して実現されます。グリッドとコンテナに基づいてサイトレイアウトを作成することがすべてです。 続きを読む。

于 2009-03-11T20:53:42.333 に答える
2

ガンボ、「ページ」とは、Webページのコンテンツを意味しますか、それともページを含むウィンドウを意味しますか？あなたが窓を意味するならば、答えはしないでください。コンテンツを意味する場合は、液体レイアウトを使用できます。グーグルそれ。

于 2009-03-11T21:23:16.070 に答える
1

サイズを自分で明示的に設定しない限り、ページはデフォルトでブラウザウィンドウの全幅を使用します。

FirefoxのWebDeveloperプラグインを使用すると、ブラウザのウィンドウを特定のサイズにすばやく変更できるため、レイアウトがさまざまなサイズでどのように表示されるかを確認できます。https://addons.mozilla.org/en-US/firefox/addon/60

于 2009-03-11T20:48:40.660 に答える
1

本文やdivを含む要素など、Webページの要素に特定の幅を指定しない限り、ブラウザウィンドウの幅まで拡張されます。

ピクセル単位のサイズをユーザーの幅に設定する場合は、javascriptを使用して幅を動的に設定できます。

<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>

ただし、パーセントで指定された幅を使用して自動的に拡張される、より流動的なレイアウトを使用する必要があります（たとえば、CSSで要素の幅を設定するwidth: 100%:)

于 2009-03-11T20:53:19.277 に答える
0

あなたのhtmlで：

<div id="content">
<!-- Some content in here -->
<div>

次に、CSSで：

#content {
    width:100%;
}

またはより多くの制御のために：

#content {
    min-width:500px;
    max-width:1000px;
}
于 2009-03-11T20:49:38.973 に答える
0

HTMLは、(テキスト) コンテンツの意味を記述する単なるマークアップ言語です。たとえば、「<h1>Foobar</h1>just means 」Foobarは第 1 レベルの見出しですが、表示すべきスタイルについては何も伝えません。

HTML ドキュメントのスタイルを設定するために、Cascading Style Sheets (CSS)が導入されました。しかし、CSS は単なる記述言語でもあり、ユーザー エージェントについては何も知りません。(特定の要素を特定の幅で表示する必要があるなどと説明することもできます。)

しかし、JavaScript はユーザー エージェントを認識しています。このscreenオブジェクトを使用して、画面または使用可能なビューポートwidthのとを取得できます。height

于 2009-03-11T21:07:26.670 に答える
0

ボブがモニターの実際のサイズについて尋ねているのか、それともウィンドウのサイズについて尋ねているのかについては、多少の混乱があると思います。

Josh Stodola と Rich Bradshaw は HTML/CSS の回答を提供しました。これはパーセンテージを使用して、ウィンドウと共に拡大する流動的なレイアウトを作成します。次のコードは、この手法をまとめたもので、2 つの列を作成します。1 つは現在のブラウザー ウィンドウの 80% を占め、もう 1 つは 20% を占めます。ユーザーがウィンドウ サイズを変更すると、列のサイズが変わります。

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        width: 80%;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        width: 20%;
        float: left;
    }
</style>
</head>
<body>
<body>

<div id="content1"></div>

<div id="content2"></div>

</html>

Rudd Zwolinski は、ユーザーの現在の解決策を探す回答を提供しました。他の人は、この方法を使用することによって引き起こされる潜在的な煩わしさをすでに投稿していますが、私にはわかりません.解像度のサイズについて芸術的な声明を出しているのかもしれません. このメソッドを使用した上記の同じコードは次のとおりです。

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        float: left;
    }
</style>
<script type="text/javascript">
    var userWidth = screen.width;
    var userHeight = screen.height;

    function resizeContent()
    {
        document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
        document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
    }
</script>
</head>
<body onload="resizeContent()">

<div id="content1"></div>

<div id="content2"></div>

</html>

それが役立つことを願っています。

于 2009-03-11T21:09:59.847 に答える