出張パソコンサービス わいわいPC.

電話:090-3300-4121 メール:mail@y2pc.net

わいわいPC.ブログ

 

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>


 

categories


 

archives


 


 

ウェブサイトのレスポンシブ化:覚書

<head>内に記述
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

各画面幅に対応したCSSファイルを添付(例は 960px以上, 959〜641px,640px以下 の3つ を制作)
1) <link href="css/styl.css" rel="stylesheet" type="text/css" media="screen and (min-width:960px)" />
2) <link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (max-width:959px) and (min-width:641px)" />
3) <link href="css/smart.css" rel="stylesheet" type="text/css" media="screen and (max-width:640px)" />
 
3つ全てのスタイルシートに記述(枠幅に合わせて img, table の幅をフレキシブルに表示させる)
img {
 max-width: 100%;
 height: auto;
 width /***/:auto;
}
table {
 table-layout: fixed;
 width /***/:auto;
}

HTMLの記述にはできるだけスタイルを直接設定せず、可能な限り各スタイルシートに記述する

ゥ好織ぅ襯掘璽箸傍述する 各id, 各class, 等の枠幅は、基本になる 960px以上用(PC用)には px値等 にて絶対値で記述し、959px〜641px用(タブレット用), 640px以下用(スマホ用)には %値等 にて相対値で記述する

コメント
コメントする