一、使用width或max-width:
width:100%依照父元素大小而可以自適應延伸,如果父元素太大圖片解析度會變差。
max-width:100%可以放大保有原本寬度,向內縮也可以。

二、rwd時css reset增加幾項
img {
max-width:100%;保持原圖大小,也可向內縮
height:auto;
}

同一張圖片在pc table phone上會越來越大
所以如果用的圖是小圖要使用大圖
避免pad跟phone上圖解析度太差
建議大圖尺寸600X400

三、rwd時banner設定
1.準備大圖小圖兩張圖
2.img用全域設定max-width:100%
height:auto


四、rwd時banner用background-image設定時
height:420px; 高度設定
background-color:black;延伸背景設定(與圖片相關色系)
background-repeat:no-repeat;
background-position:center center;
background-image: url()

@media 寬度600以下換另一張小圖

五、使用img或者background-image的建議:
1.用background-image當banner:Banner裡面如果有放字,
而且要考量在手機上顯示會不會過小,是否要把文字拆出來放。當然純img也可以(使用絕對定位)。

2.電子商務上面的產品列表,通常都是直接插入 img,畢竟你不可能在 css 放各種產品背景圖案,
但也是有跟後端配合時 在HTML標籤上寫 style background ,最後在圖片上面插入文字
有的網站的作法則是 PC一張、Mobile一張,文字太長會導致在手機與桌機上辨識不清楚所以蓋在上面。

3.依照「文字是否要放在圖內」、「圖片有無要設計兩種size以上(PC、Mobile)」、
「思考要怎麼跟後端配合,他要依照什麼規則在後台上圖,前台也會跟著正常」這三點來衡量,
最後再依照設計師提供給的設計稿來決定要怎麼開發 web layout。

文章標籤
創作者介紹
創作者 READY sharing 的頭像
READY sharing

Ready sharing

READY sharing 發表在 痞客邦 留言(0) 人氣()