移动屏幕的响应式网站

Question

我对移动设备的 Web 开发非常陌生，主要用于桌面屏幕的开发。我目前正在再次编写一个网站代码，以使其对 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; {
        }
}