CSS3 @media 查詢，根據屏幕screen大小調節前端顯示；媒體查詢方法的使用

------------------- 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