Responsive Web Design-響應式圖片tips(注意重點)

CSS RESET
CSS reset多寫

img{max-width:100% ; height:auto}

避免圖片出現x軸 y軸
................................................................................................................

高度設定有兩種

img{max-width:100%} 最寬為圖片寬度,縮小會隨著螢幕尺寸縮小
img{width:100%}寬度隨螢幕縮放，放太大可能解析度失真，要注意圖片原始解析。

............................................................................

Desktop First Design 多圖片瀏覽
高螢幕解析通常是三欄式排版，但切換到平板瀏覽和手機瀏覽會變成雙欄式和單欄式瀏覽，
如果使用針對三欄式排版寬度去裁切圖片尺寸,當切換手機瀏覽時解析度可能會失真
所以要以單欄式排版的尺寸去裁切圖片大小. 建議600px

.................................................................................................................

LOGO寫法

logo通常為了防止失真會使用svg檔,有些比較舊的瀏覽器可能無法載入svg檔,需改用png
所以兩個檔案連結都會使用
{background-image:url(..../image.svg);
  background-image:url(..../image.png) }

圖片大小如果超過預設範圍尺寸，圖片只會顯示一小區塊，為了防止這種狀態發生會加寫一個語法

{background-size:content;}圖片會隨著預設範圍尺寸自適應

logo為了讓google seo搜尋到，會用到圖片取代文字技巧，但會用一些語法把文字推擠出螢幕,讓視覺看不到

{ text-indent:101%;
   overflow:hidden;
   white-space:nowrap;}