針對手機屏幕的響應式網站

Question

我對移動設備的網頁開發相當陌生，主要用於開發桌面屏幕。我目前正在重新編寫一個網站代碼，以便使其與Bootstrap 3保持一致。我遇到的問題是，在手機屏幕上字體大小非常小，而我的臺式電腦屏幕上的字體很小（請參閱下面的圖像以瞭解三星xcover3屏幕：480x800）。

有沒有一種方法可以使字體變大而不會更大？該解決方案將產生於桌面屏幕，這是不符合或者非常大的字體大小...

Answer 1

你應該使用媒體查詢。 在您的自定義CSS中添加此MQ屬性。

@media screen and (max-width : 991px) { 
     .example {font-size:20px; { 
     } 
} 

@media screen and (max-width : 768px) { 
     .example {font-size:20px; { 
     } 
} 

@media screen and (max-width : 568px) { 

     .example {font-size:20px; { 
     } 
}