一、如何判斷用什麼響應式斷點？
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
img {
max-width:100%;
height:auto;
}
五、css圖片取代文字
<div class="logo">
<a href="...">LOGO</a>
</div>
.logo a{
background-image: url(../image/logo.png);
width: 170px;
height: 36px;
/* 加入以下 */
display: block;
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}
文章標籤
全站熱搜
留言列表
『READY前端』 (10)
