h5移动端屏幕适配

1.rem

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

        html{
            font-size: 20px;      //设置1rem代表的大小，一般选用20比较好计算
        }

        body{
            margin:0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        (function (doc, win){
            var html = doc.documentElement,                
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  //手机横屏，竖屏可在此处设置   
            recalc = function(){
                var clientWidth = html.clientWidth;
                if (!clientWidth) return;
                docE1.style.fontSize = 20*(clientWidth/320) + 'px';    //以iphone4屏幕为基准
            };

            if (!doc.addEventListener) return;
            win.addEventListener('DOMContentLoaded', recalc, false);  //$(window).on('resize',function(){})
        })(document, window);
    </script>
</body>
</html>

上述代码，便是屏幕适配的整个框架，可以适用手机，平板，电脑。

可以在其中写入自己的代码，以rem为单位（此代码1rem=20px）；

有缩放效果，以px为单位，是绝对值，不会随着屏幕大小的改变，而改变；

以百分比为单位，注意将标签的所有父元素都已百分比为单位，同样有缩放效果；

2.从css角度考虑

<meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            margin:0;
            padding:0;
        }
       .wp{ 
　　　　　　　width:800px; 
　　　　　　 }
        @media screen and (min-width: 1000px){
            
        }
        
        @media screen and (min-width: 640px) and (max-width:999px){
            .wp{
                width:800px;
            }
        }

        @media screen and (max-width:639px){
            .wp{ 
　　　　　　　　　 width:800px; 

　　　　　　　　　}
        }
    </style>
</head>
<body>
    <div class="wp">
    </div>
</body>
</html>

上述代码中一个@media代表一种屏幕大小，相当于js中的一个if语句，然后将在不同屏幕下显示的样式分别写进自己的@media中，这种情况代码量比较大，屏幕中类也挺多的

posted @ 2017-09-30 11:24  履霜坚冰  阅读(3402)  评论(0)  编辑  收藏  举报