个人收藏的移动端网页布局rem解决方案

写移动端项目时，总是会纠结是用css3 media query 还是用rem。移动端框架挺多，但是因为项目都比较小，不考虑使用。

无意在网上找到一个移动端rem布局的解决方案，经个人实践，目前未出现什么大问题，收藏备用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端rem布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <style>
        .test{
            width: 1rem;
            height: 1rem;
            background-color: #fa5275;
        }
    </style>
</head>
<body>
    <div class="test"></div>
    <p>设置前html的fontsize:16px;</p>
    <p>设置前html的fontsize:16px;</p>

    <script>
        function adapt(designWidth, rem2px){
            var d = window.document.createElement('div');
            d.style.width = '1rem';
            d.style.display = "none";
            var head = window.document.getElementsByTagName('head')[0];
            head.appendChild(d);
            var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
            d.remove();
            document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
            var st = document.createElement('style');
            var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
            var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
            st.innerHTML = portrait + landscape;
            head.appendChild(st);
            return defaultFontSize;
        }
        var defaultFontSize = adapt(640, 100);
    </script>
</body>
</html>

 

posted @ 2016-12-15 17:36  木西梧  阅读(568)  评论(0)  编辑  收藏  举报