Kite的筆記
0%

伸縮自如的RWD排版術(下)

發表於 更新於 分類於
686 1 分鐘

  • max-width 與 width 差異

    max-width 最大就是1200 不會再大了

    如果螢幕寬度為768 ，那max-width 就會自動縮到768

    2021_05_16_18_20_42_511.png

    2021_05_16_18_20_50_32.png

rwd img css，可當作是css reset 其中一個

1
2
3
4
img{
max-width:100%;
height:auto;
}

如果客戶使用了單眼相機上傳照片，width 很有可能是4800 ，用這個方法，可以避免版型破掉

全域 border box

1
2
3
*,*::before,*::after{
box-sizing:border-box;
}

市場手機大小

  • iphone 7~ 11 375px
  • iphone plus 414px
  • ipad 768px
  • PC 1140px 1200px

media query 要從最大寫到最小

1
2
3
4
5
6
@media(max-width:768px){
}

@media(max-width:568px){

}

業務潛規則 就會去客戶 把它們在用的載具都記錄起來，給設計稿可以剛好符合

版型有很多種做法，都可以做得出來，最後你會找出自己的維護風格

適時的使用display:none ，因為不見得在手機的資訊量是需要這麼多的

設定767px 直接全吃小於ipad 的裝置

1
2
3
4
5
@media(max-width:767px){
.header{
    width:100%;
}
}

ipad 大於768px

斷點越少越好,設計給pad mobile 吃

不要超過5個，儘量3個