一、如何判斷用什麼響應式斷點?
1.如果有舊網站,就使用google analytics分析觀察數據判斷。
2.如果沒有舊網站,就以最熱門解析度為主。

二、熱門解析度有哪些?
1. 960px
2. 1000px
3. 1280px(最大通常這個寬度)
4. 1440px

不使用太寬的原因是
- 人類視覺無法看太寬
- 圖太大會載入太久


三、常用的斷點
1. iphone5:320px
2. iphone6:375px
3. iphone6 plus:414px
4. ipad以下:767px
5. ipad以上:768px

注意:
- 不同斷點的圖片大小放不同尺寸的,避免大段點圖片放太大會解析度不夠
- 用iconfinder找SVG圖,SVG圖放大之後不會模糊
四、響應式圖片的css reset


五、css圖片取代文字

 

.logo a{
background-image: url(../image/logo.png);
width: 170px;
height: 36px;
/* 加入以下 */
display: block;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;

}


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

Ready sharing

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