------------------- 1.媒體查詢方法在 css 裡面這樣寫 --------------------

@media screen and (min-width: 320px) and (max-width: 480px){
在這裡寫小螢幕裝置的樣式
}

@media only screen and (min-width: 321px) and (max-width: 1024px){
這裡寫寬度大於321px小於1024px的樣式(一般是平板電腦)
}

@media only screen and (min-width: 1029px){
這裡寫pc客戶端的樣式
}

使用JS判斷螢幕是橫屏還是豎屏，然後使用媒體查詢進行CSS設定：https://www.w3cways.com/1772.html

參考：

http://www.runoob.com/cssref/css3-pr-mediaquery.html

http://blog.51cto.com/ezbanana/1892526

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries