• Dev
  • 20th
  • Tips
  • English
  • Favorites
  • Others
temp

a deck for makers but poor

viewport

2017/1/17 by IKIX_temp

 レスポンシブデザインに必要なのは,メディアクエリとビューポートである.メディアクエリはCSSに,ビューポートはHTMLのmetaタグに,いずれも一行記述するだけだ.ただ,そのあとが難しめなので楽しいところである.
 ビューポートは,metaタグのnameにviewportと書き,その後にwidth=device-widthとinitial-scale=1とmaximum-scale=1をカンマでつないで書いていく.それだけ.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 メディアクエリは,CSSの中で@media screen and ()と書いて最大幅を指定する.それだけ.
@media screen and (max-width: 600px) {
  CSSを書いていく........
}

 その後で,HTMLに書いたDOM要素たちを最大幅以下のデバイスでどのようにレイアウトするかを書いていくのだが,まったく別のCSS記述になりそうならsp版として作ってしまうことも考える.
 ともあれ,スマホを対象としてHTML5を書くなら,metaタグにcharset=”utf-8″と,検索機関に表示されるname=”description”,それにname=”viewport”の3つを書いていくことにする.

カテゴリー: Tips タグ: Web, デバイス
← $.ajax();
draggable →

Search

Tags

20th century Angular AP ASD Git Google HTML5 iOS IoT JS LW MCSA MS MVC NFT Office PCインストラクター PHP Processing Python SQL Town UNIQLO UX Web Windows WP YouTube アルゴリズム グラフ理論 ゲノム栄養学 サーバ管理 デザイン デバイス ミニマリズム モバイル 信仰 声楽 情報建築 技能士 投資 政治 文学 日曜数学 本

Archive

Copyright © 2025 temp.

Omega WordPress Theme by ThemeHall