如何在網頁使用RWD
文章學習出處來自https://www.w3schools.com/css/css_rwd_intro.asp
ViewPort
ViewPort主要是使用者可以看到的範圍，當使用者用電腦或者手機的時候因為網頁要呈顯給使用者，所以有顯示方式會不同。
設定ViewPort
請在Html裡面的Header裡面加入這一句
<meta name="viewport" content="width=device-width, initial-scale=1.0">The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
注意事項
一般使用者不管使用電腦、平板或者手機，基本上都是垂直滑動而不是水平滑動，如果使用者要做水平滑動或者放大或者縮小圖片，這是不太好的使用者體驗
W3C提出下面建議
1. Do NOT use large fixed width elements - For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.
2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.
3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
