Media Query Break Point

Media Query Break Point

做者：吳業飛 時間：2018.07.02

本身總結的作移動端適配時的媒體查詢斷點寫法

/*media query break point
*Author: Alan
*Date: 2018.07.02
*/

// mobile:442px*870px

/*Phone            Resolution
*Galaxy S5         360*640
*Pixel2            411*731
*Pixel2 XL         411*823
*iPhone 5/SE       320*568
*iPhone 6/7/8      375*667
*iPhone 6/7/8 Plus 414*736
*iPhone X          375*812
*iPad              768*1024
*iPad Pro          1024*1366
*/

/*Break Point
*414
*411
*375
*360
*320
*/

/*
*This template use like this:
*首先將iPhone 5/SE 320*568做爲基礎參照，把樣式寫在@media (min-width: 0px) and (max-width: 443px)中，
*即將最小分辨率下的樣式做爲基礎樣式
*作完iPhone 5/SE 320*568適配接下來其餘的手機將個別要改動的樣式寫在對應斷點中
*Note: 這個文件中沒作pad的適配，由於在個人實踐中將pad的適配單獨提取出來了
*/
//global
@media (min-width: 0px) and (max-width: 443px) {}
// iPhone 6/7/8 Plus 414*736
@media (min-width: 413px) and (max-width: 415px) {}
// Pixel2            411*731
// Pixel2 XL         411*823
@media (min-width: 377px) and (max-width: 412px) {}
// iPhone 6/7/8      375*667
@media (min-width: 362px) and (max-width: 376px) {}
// Galaxy S5         360*640
@media (min-width: 322px) and (max-width: 361px) {}
// iPhone 5/SE       320*568
@media (min-width: 0px) and (max-width: 321px) {}
複製代碼

---

版權聲明：自由轉載-非商用-非衍生-保持署名