Question

您好我正在建立一个网站，我觉得如果用户的显示器较小或者使用分屏，页面上的文字是可扩展的非常重要。

我有以下HTML编码，我认为这会使其有效扩展，但没有任何反应？

HTML：

        <p id="text">
            View <a id="advertlinks" href="Prices.html">Prices</a> </br>Or <br><a id="advertlinks" href="Contact_Us.html">Book</a> A Lesson
        </p>

CSS

#text
{
z-index:100;
position:absolute;    
margin-top:-22%;
margin-left: 70%;
padding: 2%;
width: 22%;
height: 25%;
background-color: #f6da30;
opacity:0.6;
font-family: Impact, Charcoal, San-Serif;
font-size: 170%;
text-align: center;
-moz-border-radius: 30px;
border-radius: 30px;
}

Answer 1

使用CSS媒体查询：

@media all {
    #text {
        /* Default font size */
        font-size: 12pt;
    }
}

@media all and (max-width: 768px) {
    #text {
        /* Font size for smaller displays/screens */
        font-size: 16pt;
    }
}

进一步阅读：http://css-tricks.com/css-media-queries/

Answer 2

如果您希望文本相对于屏幕宽度进行缩放，那么您最好的选择是响应式文本jQuery插件，例如FlowType和FitText。如果你想要一些轻量级的东西，那么你可以使用我的Scalable Text jQuery插件：

http://thdoan.github.io/scalable-text/

样本用法：

<script>
$(document).ready(function() {
  $('#text').scaleText();
}
</script>

HTML：可缩放文本

2 个答案: