レスポンシブWEBデザイン！
お久しぶりの書き込ですが、何故なら、最近MTは更新くらいしか触ってないので。
Wordpressを使うことが多くなりました。。。ちょっとした構築はそっちの方が便利。
でも、大きなカスタマイズをする時はMovable Typeの方が好み。なので、これからもMTカスタマイズしていくとおもいます。
と、いいながら。
今日の話題はPCとスマホ同じファイルを使って表示する、そう。
レスポンシブWEBデザイン
についてです。
仕事でもう何回もレスポンジブ対応してみて、だんだんどうやればやりやすいかわかってきました。
とにもかくにも
head内に入れるものとして
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="./css/smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="./css/ie.css">
<![endif]-->
まず、viewportのmeta
普通のPC向けのcssと、スマホ向けcss。
必要があればタブレット向けも作ります。
それから重要。
IE対応。
そして外部CSSファイルの用意。
PC向けのCSSは
-----------------
@charset "utf-8";
@media screen and (min-width: 481px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
/*-------------481ｐｘ以上 pc用レイアウト--------------*/
}
-----------------
スマホ向けは
@charset "utf-8";
@media screen and (max-width:480px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
/*-------------480px以下 スマホ用レイアウト--------------*/
}
で、
@media
がIEでは認識されないので、普通のCSS、「./css/ie.css」を用意するわけです。
進め方としては、
「このあとスマホ対応を考えていく作業があるぞ～」
と思いながら先にPCを組み立てていくのが楽です。
August 28, 2013 12:11 PM
｜
カテゴリー：
レスポンシブWEBデザイン
|
|
コメント(0)
|
トラックバック(0)
|
