響應式(Responsive)
所謂的響應式網站，意即透過自動縮放、隱藏/顯示，來讓一個網站在各種裝置上的版面、外觀，看起來都是好的。
Viewport
所有的響應式網站，在meta data中都需加入以下這行code，來引導瀏覽器用正確的尺寸和比例來呈現網站。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
響應式圖片
圖片的處理如下:
- max-width: 100% 用百分比來控制圖片寬度，用max-width比width的好處 － 圖片可以盡可能地放大，但是如果這張圖片原始檔案"沒那麼大"，就以原始檔案的寬度為主。
- 這篇文章中有說明的<picture></picture>，可以以螢幕解析度的不同來顯示不同圖片
響應式文字
文字的大小可用vw做為單位，1vw = 1%。所以假設，font-size:1vw，螢幕解析度為1024px，那font-size = 10.24px
Media Queries
用途：依據螢幕解析度不同，可以套用完全不同的樣式
響應式網站的框架
這篇文章中，提到的css framework都有處理響應式的需求
沒有留言:
張貼留言