webapp font-size解决问题的方案

最新推荐文章于 2019-07-22 17:20:00 发布

Keller-Zhou

最新推荐文章于 2019-07-22 17:20:00 发布

阅读量381

点赞数

CC 4.0 BY-SA版权

分类专栏： html5技术积累

本文链接：https://blog.youkuaiyun.com/qq_15602525/article/details/52047004

html5技术积累专栏收录该内容

21 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>Title</title>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script>

        //-------------------------方法 -  小数点精度可能会产生误差,但几乎不会发生----------------
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;

                //如果设计搞的宽度 = 640px,设计一般用640*940
                html.style.fontSize = windowWidth / 6.4 + 'px';
                // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
            }, false);
        })();


        $(document).ready(function() {
            $("#bt").click(function() {
               alert("当前浏览器计算的宽度是"+$("#my_div").width()  );




            });
        });
    </script>


    <!--6.4的话就是全宽 (任何手机都能适配)-->

    <style>
        body {
            padding: 0rem; margin: 0rem;
        }

        div { width: 6.4rem;  height:1rem; background-color: greenyellow}
    </style>



    <!------------------一般写法写法  -----------------

   	var winW = document.documentElement.clientWidth;
	var desW = 640;
	var fontSize = 100;
	var rem = desW/fontSize;
        if(winW>desW){//但前屏幕大于640,就不需要适配了320/  640/100 = 6.4   
            winW=desW;
    	}
	document.documentElement.style.fontSize = winW/rem+"px";
    </head><body>    <button id="bt">ok</button>   <div id="my_div">适配</div></body></html>