Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

レスポンシブWebデザイン - ビューポート

ビューポートとは何ですか?

ビューポートユーザページ表示可能な領域。

ビューポートは、中国と呼ばれるに翻訳することができる「ビューポート」。

この意志(モバイルブラウザは、(ビューポート)通常はこの仮想「ウィンドウ」の画面よりも広い(ビューポート)仮想「窓」のページであるので、あなたはすべてのページに小さなウィンドウを圧迫する必要はありませんモバイルブラウザのページのために最適化されたダメージのレイアウトはありません)、ユーザは、パンやページのさまざまな部分を表示するには、ズームすることができます。


ビューポートの設定

次のように一般的なモバイル最適化されたWebページのビューポートmetaタグは、次のとおりです。


  • 幅:ビューポートのサイズを制御する600場合、値は、指定することができ、またはそのようなデバイス幅のデバイス幅などの特別な値、(ピクセルのCSSに時間の100%にスケーリング)。
  • 高さ:指定された幅と高さと対応します。
  • 初期の規模:初期スケール、それはときに最初のページのロード時間スケール、です。
  • 最大規模:ユーザーが最大比にズームすることができます。
  • 最小スケール:ユーザーが最小規模を拡大・縮小することができます。
  • ユーザースケーラブル:ユーザーが手動でズームすることができるかどうか。

次の例では、ビューポートではなく、モバイル副作用のを使用して、ビューポートの使用方法を示しています。

例1は、ビューポートを添加しなかった。 見るためにクリック

例2、ビューポートを追加します。 クリックで拡大

あなたがタブレットや携帯電話でご覧の場合は、効果を確認するためにクリックすることができます。