-2

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

我有以下 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;
}
4

2 回答 2

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/

于 2013-09-09T22:13:00.523 回答
0

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

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

示例用法：

<script>
$(document).ready(function() {
  $('#text').scaleText();
}
</script>
于 2014-03-06T04:12:11.363 回答