サイズでの切り替え

<link href="/css/small.css" rel="stylesheet" media="only screen and (min-width: 0px) and (max-width: 768px)">

上記の例では0 ～ 768pxの場合は「small.css」を適用させる記述となります。

スマホやタブレットといった小さい画面になった場合にも切り替えられます。

@media screen and (min-width:961px) {
/*pc*/
}
  
@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet*/
}
 
@media screen and (max-width:375px) {
/*スマホ*/
}

 

デバイスによる切り替え

以下、PHPによるデバイスで条件分岐させる方法。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
 ?>

<?php if($browser=='sp') { ?>
<link href="/css/small.css" rel="stylesheet">
<?php } ?>