Question

我使用以下css代码来减小滑块标题的字体大小：

.swiper-slide .content h2 {
  font-size:48px;
}

从桌面或笔记本电脑上看，它似乎运行良好，但在智能手机上观看时文字尺寸过大。

我在PC上使用Windows 7，wordpress CMS，响应主题......

Answer 1

在％中使用font-size应该可以帮助您相对更改大小。但是你应该记住行高属性。

Answer 2

您可以尝试媒体查询吗？

html { font-size: 62.5%; }
body { font-size: 1em;}

    @media (max-width: 300px) {
        html { font-size: 70%; }
    }

    @media (min-width: 500px) {
        html { font-size: 80%; }
    }

    @media (min-width: 700px) {
        html { font-size: 120%; }
    }

    @media (min-width: 1200px) {
        html { font-size: 200%; }
}

试试这个:) http://jsfiddle.net/yv5eu/

Answer 3

尝试使用此技术可以更好地调整文本大小。与媒体查询相比，您可以设置不同的字体大小。

http://snook.ca/archives/html_and_css/font-size-with-rem
http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/ 支持：http://ahedg.es/w/rem.html

智能手机视图中css字体大小更改无法正确调整大小

3 个答案: