らりょすの日記

備忘録と感じたことと。ブログじゃないです,日記です。

しすけんらじお+特設ページのレスポンシブ化

を,昨日しました。

俺なりに頑張ったんですが・・・

どういう表示になっているか

各自ご確認ください
http://sysken.org/radio/

やったこと

HTMLに以下を追記

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./media/modern.css">

普通のやりかたですね

で,CSSを変更
default.cssとかindex.htmlを適宜変更しつつ
modern.css

@charset "UTF-8";

/**         modern.css           **/
/**       For Responsive         **/
/**      Update: 2014.05.11      **/

@media screen and (min-width: 980px) {
/* PC表示 */
}
@media screen and (min-width: 768px) and (max-width: 979px) {
/* iPad以上のタブレット用 */
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
/* iPad未満のタブレット用 */
}
@media screen and (max-width: 479px) {
/* スマホ用 */
}

ってなかんじでCSS記述

メディアクエリ便利

結論

まだまだ未完成
進捗についてはgithubをご確認ください
https://github.com/TNCT-SYSKEN/radio/