RWD響應式網站,CSS調整
首先是HTML的地方,在head的地方需加上
<meta name="viewport" content="width=device-width, initial-scale=1" />
CSS的地方
請記得,一定要從最大開始寫到最小,因為css是從上到下去執行,若顛倒的話會一直呈現1024~1200解析度喔!!
@media screen {
#border{
}
#text{
}
}
//表示最小寬度1024
@media screen and (min-width:1024px) and (max-width:1200px) {
}
@media screen and (min-width:768px) and (max-width:1023px) {
}
/*Media Query ,也就是當寬度 < 768 px 時將載入下面這段 CSS :平板*/
@media screen and (min-width:481px) and (max-width:768px) {
}
/*Media Query ,也就是當寬度 < 480 px 時將載入下面這段 CSS :手機*/
@media only screen and (max-width: 480px) {
}
/*Media Query ,也就是當寬度 < 414 px 時將載入下面這段 CSS :手機*/
@media only screen and (max-width: 414px) {
}