手机端自适应字体大小和元素宽度自适应

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。

这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。

字体、宽高都用rem来定义，此方法略爽！

@media (min-width:0px){
    html{font-size:12px;}}
@media (min-width: 320px){
    html{font-size:12px;}}
@media (min-width: 340px){
    html{font-size:13px;}}
@media (min-width: 360px){
    html{font-size:14px;}}
@media (min-width: 380px){
    html{font-size:15px;}}
@media (min-width: 400px){
    html{font-size:15px;}}
@media (min-width: 420px){
    html{font-size:16px;}}

现在找到了一个方法，页面插入一段js，切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就看设计稿的px

比如是24px，那么写样式就是1.5rem

这个时候牵扯算法1rem = 16px

<script type="text/javascript">    
    function fontSize(){        
        var deviceWidth=document.documentElement.clientWidth>640?640:document.documentElement.clientWidth;
    document.documentElement.style.fontSize=(deviceWidth/25)+"px";    
   }
    fontSize();
    window.onresize=fontSize;
</script>