寫RWD的方法

RWD寬度範例

max-width的指定值為包含。
該當寬度與該當寬度以下的裝置，都會套用到RWD的CSS內容

@media (max-width: 768px)
 body
  background: pink

圖片也能透過<picture>與 <source>做到當大螢幕時讀A圖，小螢幕時讀B圖的效果

picture
 source(media="(max-width: 480px)" srcset="手機版的圖.png")
 img(src="電腦版的圖.png" width="100%")

不論在電腦版，或是手機版，畫面都會顯示出<img>，並且一樣繼承width="100%"的參數
只是，當他變成手機版時（依照上例的設定，當寬度等於或小於480px時），<img>的src會作切換，切換成source所定義的「手機版的圖.png」的位置

Again，因為max-width具備了包含的含義，所以顯示情形如下（以上例為例）

在JavaScript實作螢幕寬度的功能，我們需要使用到innerWidth這個方法。

需要注意的一點是，假如今天這份網站的break point統一設定為768px好了。
在767px、768px時切換為手機版，但在769px時切換成電腦版。

由於media max-width的包含的特性，參數會下成

@media (max-width: 768px)
 body
  background: pink

picture
 source(media="(max-width: 768px)" srcset="手機版的圖.png")
 img(src="電腦版的圖.png" width="100%")

但在JavaScript，如果我們也想要使用768px這個參數，if statement需要寫成「小於等於」，也就是「<=」

if(innerWidth<=768){
　　document.body.style.backgroundColor='pink';
}

如此一來，才能與CSS沿用同一個參數，並同樣達成以下效果

當然，如果搞剛的話，也可以加上resize事件，讓畫面一動到尺寸就重新渲染JavaScript。
但基於使用者（基本上）不會亂切尺寸，所以本例就沒有加工了。

最常見的方法就是直接寫在CSS內，但這樣做CSS的易讀性會很差

@media (max-width: 768px)
 body
  background: pink

<link>也能指定Media Query，讓只符合某些Media條件下時，才能連到某特定CSS檔案

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

body
 background: pink

import法適用於複雜的Media寬度指定，比方說寫了好幾個版本的RWD：iPad直版、iPhone SE版、iPhone X版、iPad橫板…
Media條件太多時，全部寫進CSS會很亂，都寫到<link>裡面也會落落長
所以最好就是寫進一隻index.css裡面進行指定

寫import的時候，<link>指派的順序相當重要
必須要把index.css放到最末位

<link rel="stylesheet prefetch" href="style.css" />
<link rel="stylesheet prefetch" href="index.css" />

index.css只能用來寫各種import，沒辦法寫一般的CSS樣式
如果寫的CSS樣式的話，import的效力就會消失

@import url(mobile.css) screen and (max-width: 768px);

body {
 background: pink;
}