手机网站字体大小和包装

Question

我有一个简单的静态网站，其中有几行文字。

它只能从移动设备访问，我希望文本的字体大小为屏幕高度的1/3，并根据屏幕宽度换行。

可以使用CSS & HTML吗？如果是的话如何？

感谢

Answer 1

简单的答案是编程服务基于移动设备上的样式表。你可以在你的CSS文件中做到这一点：

@media screen and (max-device-width: 480px) { 
    font-size: 160px; /* 1/3 max screen height */ 
} 

或者，您可以使用JavaScript来计算视口的宽度和高度，然后动态设置样式。与white-space: normal CSS

window.onload = function() { 
    var viewportwidth; 
    var viewportheight; 

    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
    } else if (typeof document.documentElement != 'undefined' 
    && typeof document.documentElement.clientWidth != 
    'undefined' && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } else { 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
    } 
    document.body.style.fontSize = viewportheight/3; 
} 

设置自动换行，如果需要，word-wrap:break-word