スタイルシートをパソコンとスマホで分ける!!

WEBの作成で、パソコン用とスマホでコンテンツの表示をわけるというやつですが、やはりソースはひとつで、スタイルシートで見え方を変えたいというケースが結構おおいんじゃないでしょうか。

自分もいろいろとやってみましたが、これが一番しっくりきます。

外部スタイルシートをパソコン用レイアウトとスマホ用レイアウトで分ける場合はこんな感じで

 

 
<LINK href="style/gl_pc.css" rel="stylesheet" type="text/css"> <!-- 共通スタイルシート パソコン-->
<LINK media="only screen and (min-width: 0px) and (max-width: 568px)" href="style/gl_sp.css" type="text/css" rel="stylesheet" /><!-- 共通スタイルシート スマホ -->

さて、ページ固有のスタイルシートですが、最初は以下の方法を知らずに、共通スタイルシートのようにページに対応するスタイルシートを外部ファイルにパソコン用とスマホ用のファイルを作成して指定していましたが、以下のように書けることを知り、それ以来このやりかたがしっくりきています。

<style type="text/css">
<!--
@media screen and (max-width: 568px) {
   /* 表示領域が568px以下の場合に適用するスタイル  スマホ*/
   img{
    width:600px;
   }
}

@media screen and (min-width: 568px) {
   /* 表示領域が800px以上の場合に適用するスタイル パソコンとする*/
   img{
      width:100%;
   }
}
-->

</style>
カテゴリー: HTML パーマリンク