2017年1月10日火曜日

かんたんレスポンシブ化まとめ



スマホ版いらないと聞いて製作中のサイトがあったんだけど、
急に「スマホ版もよろしくね」とお達しがあり、
あわてて見つけたこの記事がめっさ役に立った。

レスポンシブWebデザインの作り方（簡単設定方法）
https://webdesignerwork.jp/responsivewebdesign/

<head>内でこうやっといて

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->
各CSSでこれを入れておく（下記はスマホ用の例）

@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
～以下、画面の横幅が640pxまでの場合のスタイル記入～
}
@mediaの行は各端末に応じて変更する。
具体的には下記の通り。

  • PC　@media screen and (min-width: 769px){
  • タブレット　@media screen and (max-width: 768px){
  • スマホ　@media screen and (max-width:640px){


これだけ。
あとは各端末用CSSをガリガリかいていけばいい。

IE対応しなきゃならこれ。
Respond.jsを挿入する
Googleコードで公開されているcss3-mediaqueries.jsを挿入する

兎にも角にも、レスポンシブで作るとき、
最初にこうしておけばだいたいオッケイっていう。

今回はPCのみと聞いていた案件で焦ったけど、
おかげですんなり対応できたのでオススメ。

webmobileさんありがとう！






0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)