RWD 的一些設計理念

有兩種方式


第一種:


最上面是以 pc 板的setting

下面在用

@media(max-width:768px){  //  小於或等於  768px 以下會成立
    //  平板的設定
}


@media(max-width:375px){  //  小於或等於  375px 以下會成立
   //  手機的設定
}



===================================================================

第二種方式:



最上面是以 手機 板的setting

下面在用

@media(min-width:768px){  //  大於或等於  768px 以下會成立
    //  平板的設定
}


@media(min-width:960px){  //  大於或等於  960px 以下會成立
   //  PC的設定
}


================================================================


RWD 設計時要讓X軸不能調


.wrap{

width : 600px

}

.wrap {

max-width : 600px  

}

兩者差在...   width :600 是固定的...  當你的載具的螢幕寬度小於 600px....

他會跑出來X軸的scroll bar 讓你滑動


但是   max-width :600 是自適應的...  當你的載具的螢幕寬度小於 600px....

他會自己縮小width....  讓你不會跑出X軸的scroll bar