CSS レスãƒãƒ³ã‚·ãƒ–

media属性

<!– ウィンドウサイズãŒ480px以下 –>
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<!– ウィンドウサイズãŒ481px~979px –>
<link rel="stylesheet" href="medium.css" media="screen and (min-width:481px) and (max-width:979px)">
<!– ウィンドウサイズãŒ980px以上 –>
<link rel="stylesheet" href="large.css" media="screen and (min-width:980px)">

@mediaルール

@media screen and (min-width: 480px){
 ~
}
@media screen and (min-width: 780px) and (max-width: 980px){
 ~
}
@media screen and (min-width: 981px){
 ~
}

例
<div class="top-img">
 <img src="~" />
</div>
<style>
 .top-img {
  margin: auto;
  padding: auto;
  list-style-type: none;
 }
 
 @media screen and (max-width: 700px) {
  .top-img {
   width: 98%px;
  }
 }
 @media screen and (min-width: 701px) {
  .top-img {
   width: 709px;
  }
 }
</style>

ビューãƒãƒ¼ãƒˆ

<meta
  name="viewport"
  content="
    width=device-width,
    height=device-height,
    initial-scale=1,
    maximum-scale=1,
    user-scalable=no">
横幅ã€ç¸¦å¹…
width=device-width,
height=device-height,
※デãƒã‚¤ã‚¹ã«åˆã‚ã›ã‚‹(px指定もå¯)

åˆæœŸè¡¨ç¤ºå€çŽ‡ã€æœ€å¤§å€çއ
initial-scale=1,
maximum-scale=1
上記例ã§ã¯åˆæœŸè¡¨ç¤ºå€çŽ‡Ã—1ã€æœ€å¤§å€çŽ‡Ã—1
ã¤ã¾ã‚Šæ‹¡å¤§ã§ããªã„。
(ゲーム等を除ãéžæŽ¨å¥¨)

拡大/縮å°è¨±å¯
user-scalable=no
アクセシビリティã€ãƒ¦ãƒ¼ã‚¶ãƒ“ãƒªãƒ†ã‚£ã¯æ¸›å°‘ã™ã‚‹ãŒã€
動作速度ã¯é€Ÿããªã‚‹ã€‚

Follow me!