1

私は現在、自分の Web サイトのデザインに取り組んでいます。Web サイトの要素の流れを台無しにすることなく、Web ページのサイズを変更/ズームできるようにしたいと考えています。% 記号を正しく使用すると、フローの問題のほとんどが解決されることを認識しており、テキスト以外のすべてで解決されるようです。以下のjsfiddleのような単純なメニューがある場合。メニュー div の幅は %30 です。メニュー コンテナー内のテキストのサイズを変更したいのですが、折り返しや新しい行を入力する必要はありません。これは避けられないようです。以下の段落にも同じ問題が残っています。これを達成する方法はありますか？

<html>
<head>
<title>Scalable</title>
</head>
<body>

<div style="height:800px; border:1px solid green; width:900px; margin-left:auto; margin-right:auto; " >
    <img src="http://files.prof-web-diego.webnode.pt/200000028-04da905d3d/Oxford_Silhouette_Web_Banner.jpg" style="width:50%; height:auto;"/>
    <div style="float:right; width:30%;  border:2px solid blue; font-size:11px;">
        <a href="#">Home<a> |
        <a href="#">Store<a> |
        <a href="#">Contact<a> |
        <a href="#">About<a> |
        <a href="#">Pictures<a> |
        <a href="#">Entertainment<a> |
    </div>

    <div style="border:1px solid #ddd; width:65%;">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula velit in lectus dapibus porta. Sed pulvinar ultrices ipsum vitae gravida. Vestibulum at metus dolor. Nunc pulvinar nisl nec libero sodales faucibus. Quisque tincidunt risus vitae risus tempor viverra. Vestibulum interdum eros in tellus blandit vulputate. Suspendisse eget ante purus, sit amet semper purus. Nam lacinia magna a mi euismod sit amet rhoncus dolor congue. Mauris pharetra laoreet accumsan. Ut quis velit ac nisl rutrum varius nec nec orci.

Vestibulum quis tellus neque, a scelerisque est. In varius ante eget purus fringilla in aliquet massa convallis. Vestibulum in scelerisque ligula. Nulla a neque nibh. Maecenas tristique, odio nec scelerisque tincidunt, sem orci tempus nulla, eu tincidunt dolor sapien ut lorem. Donec aliquet, eros nec blandit adipiscing, leo est malesuada nulla, vel adipiscing sem risus quis ante. Proin rutrum ultrices dolor, quis auctor sem feugiat sit amet. Morbi in tellus nisl, et iaculis turpis. Cras ligula velit, pharetra vitae imperdiet nec, commodo quis erat. Aenean iaculis nunc nec nunc dignissim aliquam. In venenatis, orci vitae pretium elementum, lorem lorem sagittis est, a consectetur est lacus accumsan elit. Vestibulum iaculis hendrerit elit, nec vulputate nunc ornare sit amet. Fusce nisi risus, auctor vitae pellentesque ut, pulvinar nec nisi. Aenean nec nunc augue, non imperdiet arcu. Integer interdum orci non diam tristique ut tristique risus adipiscing. Vestibulum tellus orci, lobortis vel sollicitudin vel, gravida sed dui.

Vestibulum eu dui ni
    </p>

    </div>

</div>

</body>
</html>​

jsフィドル

http://jsfiddle.net/6UyYa/

4

1 に答える 1

0

次の 2 つの方法があります。

  1. viewport メタ タグを使用して、デバイスの幅に合わせてページを拡大縮小します (ブラウザがサポートしている範囲で)。
  2. レスポンシブ デザイン: 一連の CSS メディア クエリを使用して、デバイスのサイズに基づいてコンテンツを調整します。

レスポンシブ デザインの 2 つのバージョン:

  1. デバイスのサイズに基づいてページのレイアウト (列の数とページ上でのコンテンツの流れ) を変更し、必要に応じて一部のコンテンツをスケーリングします。これの良い例は、ボストン グローブです。
  2. レイアウトを変更せずに、すべてのコンテンツを均一にスケーリングします。@rlemon は、これに対する適切なリンクについて言及しました。Ethan Marcotte の電子ブックResponsive Web Designを読んで学びました(残念ながら、この電子ブックは無料ではありません)。このアプローチは比較的難しく、選択肢が制限されます。

レスポンシブ デザインの両方のバージョンで、コンテンツへの変更は、(JavaScript ではなく) CSS メディア クエリによって完全にトリガーされます。そして、HTML は変更されません。HTML のスタイルのみが変更されます。

レスポンシブ デザインの最初のタイプは、2 番目のタイプよりもはるかに広く使用されているようです。

上記のレスポンシブ デザインの 2 番目のタイプでは、さまざまなデバイス サイズの一連のメディア クエリによって、body タグのベース フォント サイズが % で設定され、コンテンツのすべてのサイズ単位が px ではなく em または % で指定されます (コンテンツ自体に px を使用することは絶対にありません)。すべてのコンテンツは、使用されるメディア クエリに基づいてスケーリングされます。

さらに、レスポンシブ デザインの 2 番目のタイプでは、背景画像をほとんど、またはまったく使用しません (少なくとも、私の経験では)。img タグはほぼすべての画像に使用され、CSS を介して img タグを比例的にスケーリングするための特別なトリックがあります。次のコードは、イメージを親コンテナーの全幅に比例してスケーリングします。

<img class="my-image" src="image.png"/>   <!-- No width or height attribute -->

.my-image {max-width:100%; width:100%;}
于 2012-06-11T21:22:25.290 に答える