移动端开发适配方式-百分比适配/rem适配/弹性盒模型

责编:menVScode 2018-01-03 23:24 阅读(596)

1、百分比适配

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style type="text/css">
     body {margin: 0;}
     div {width: 25%;height: 100px;float: left;}
    .box1 {background: red;}
    .box2 {background: blue;}
    .box3 {background: green;}
    .box4 {background: yellow;}
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

        百分比适配只适合宽度,对高度适配不怎么友好。一般百分比适配方案只是配合着其他方案来使用。

2、viewport适配

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
(function(){
	var w = window.screen.width;
	var targetW = 320;//把所有设备的宽度都设置成一致的:320
	var scale = w/targetW; //当前尺寸/目标尺寸
	var meta = document.createElement("meta");
	meta.name = "viewport";
	meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
	//console.log(scale);
	document.head.appendChild(meta);
})();
</script>
<!--<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">-->
<style type="text/css">
    body {margin: 0;}
    div {width: 80px;height: 100px;float: left;}
    .box1 {background: red;}
    .box2 {background: blue;}
    .box3 {background: green;}
    .box4 {background: yellow;}
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

3、rem适配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no"/>
        <title></title>
        <script>
            (function(){
                var html = document.documentElement;
                var hWidth = html.getBoundingClientRect().width;
                //console.log( hWidth );
                html.style.fontSize = hWidth/16 + "px";
                //除以多少取决于开发者自己的设定;最好在原始比例中计算后得出的值是个整数,这样才方便计算;通常750px的设计稿是除以15
            })()
        </script>
        <style>
            body{margin: 0;}
            div{
                float: left;
                box-sizing: border-box;
                width: 4rem;
                height: 4rem;
                border: 1px solid #000;
            }
            div:nth-of-type(1){background-color: red;}
            div:nth-of-type(2){background-color: yellow;}
            div:nth-of-type(3){background-color: green;}
            div:nth-of-type(4){background-color: pink;}
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

        除以多少取决于开发者自己的设定;

        最好在原始比例中计算后得出的值是个整数,这样才方便计算;

        通常750px的设计稿是除以15,相当于 1rem=50px。

4、弹性盒模型(box版和flex版)


标签: 适配 移动端 rem
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码