HTML: Масштабируемый текст

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>