做好螢幕自適應，一般只需要注意iPhone5，x，plus,等問題，注意使用absolute，relative

/*iphone 6,7,8plus screen-width:414px */

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {}

/*iphone X screen-width:375px, screen-hight: 812px */

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {}
 

/*iphone 5,5E screen-height:568px*/

  @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {}

/*iphone 4  screen-width:320px*/

@media only screen and (min-width: 320px) and (max-width: 360px) {}

/*三星Galaxy S5  screen-width:360px*/

@media only screen and (min-width: 360px) and (max-width: 375px) {}
 

/*iphone 6  screen-width:375px*/

@media only screen and (min-width: 375px) and (max-width: 414px) {}

/*iphone 6plus  screen-width:414px*/

@media only screen and (min-width: 414px) and (max-width: 768px) {}

/*iPad Mini  screen-width:768px*/

@media only screen and (min-width: 768px){}

注意@media only screen寫在需要操控的樣式後面，對已宣告樣式才可以重新賦予新樣式，媒體查詢@media寫在style靠前是不規範的寫法，切記。

如果懶得不願動手可直接將@media的程式碼放置style尾部。

參考文章：