CSS RWD響應式網站

  • 2868
  • 0
  • RWD
  • 2019-03-20

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) {
   
}