做挪动端web开辟时，我本身了解了4种要领，我以为如今合适我的要领就是用rem来作单元，合营h5新的meta属性来适配屏幕做开辟。
起首引见一下meta标签
<meta name="viewport" content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>
name="viewport"是来通知浏览器这个meta属性是设置装备视口的content=""是设置视口的具体内容width=device-width这段代码通知浏览器，页面的宽度就等当前装备的视口宽度，initial-scale=1,代表初始的页面缩放比例为1，minimum-scale=1代表缩放的最小比例为1,maximum-scale=1代表缩放的最大比例为1user-scalable=no代表不允许用户举行手动缩放。
在做开辟时，只管把minimum-scale=1,maximum-scale=1带上，由于有些第三方东西会让页面缩放,加上这两个时，代表最小缩放比例为1，最大缩放比例也为1，那就是不让用户举行缩放。接下来讲缩放比例，即就是你写的css里的1px在屏幕上显现也是1px的宽度，这就是1:1的缩放比例关系，当你在挪动装备上做开辟时，为了能让用户在屏幕上看的越发清楚，这时刻Retina屏来了，他会把画布的大小放大到本来的2倍，也就是说如今我写的css里的1px在屏幕上展现的是2px的宽度。在日常平凡开辟的时刻我想要设置1px的边框，总不可能在css里写0.5px吧，所以为了让1px的宽度在屏幕上显现也是1px的宽度，就只能去对页面举行缩放，也就是让<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>
这里先用0.5来讲。
当缩放比例为1时，也就是<meta name="viewport" content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>我们来看看这段代码的运转结果。
<style>
* {
margin:0;
padding:0;
}
.box {
width:100%;
height:400px;
margin:0 auto;
box-sizing:border-box;
background-color:orange;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
运转结果：
当缩放比例为0.5时，也就是<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>，我们来看看这段代码的运转结果。
这时刻边框也能满足我们的需求1px了。然则0.5哪里来的呢？别急，请看下面，我们在开辟时，有无注重这里的2.0
这就是缩放比，电脑屏幕缩放比为1:1，挪动装备就不一样了。人人能够看切换装备看看种种手机的缩放比。前面用的0.5，就是缩放比分之一获得的。我们在做开辟时，把meta里的种种缩放比例改成缩放比分之一就好了，然则我们又怎样猎取种种装备的缩放比呢，宁神，js内里已经有了猎取屏幕缩放比的属性了，window.devicePixelRatio,比方iphone5的这个值就是2等等。如许有了缩放比。我们就可以够经由过程js动态设置meta标签和内里的缩放比了，有了这些内容，我们就可以在屏幕上做到1px显现1px的显现了。有了这些，我们就可以用我本日所要引见的第一种要领也是我最喜欢用的要领rem规划。1rem就是1个根元素的字体大小，也就是说html设置为20px,1rem就是20px;rem是相对于根元素html的，而em是基于父元素字体大小的。
像素复原到1:1后，我们拿宽为640的设想稿，iphone5的屏来适配，此时我们就可以够依据稿子举行原模原样的切图，也就是设想稿某地区切出来时为若干px，css就写若干px。末了我们把px悉数转换为rem，比方html的font-size大小是20px,div的宽度是100px,我们就可以够把100px写成5rem。就如许一向切完全部设想稿，终究完成了切图，规划。（弹性盒子规划很壮大，发起去看看）然则当我们换一个装备比方说iphone6p时，页面规划又乱了，这是由于我们设置的html根元素的字体大小没变，而屏幕大小变了，致使规划变乱了，那末我们就要依据屏幕的大小动态的转变根元素的字体大小就好了。接下来看这段代码，带有解释
加上上面的代码以后，就可以应用在任何尺寸差别的装备上了。
下面引见别的三种规划体式格局，如今我不喜欢用这些，将来可能会夹杂用到
1，定死页面宽度，直接写一个div把宽度订到设想稿的宽度或许你须要的宽度，然后让它居中，再在这个div盒子里举行你的页面开辟，这类开辟的瑕玷就是当碰到较大的屏幕时，屏幕的双方会流出白边，影响雅观，体验不好。
2，应用百分比举行开辟，把元素的高度牢固，宽度给百分比，瑕玷就是在大屏幕上，元素的宽度被拉伸，致使宽高比例不协调，不够雅观。
3，应用相应式规划，依据差别的屏幕宽度，用差别的css款式,这个体式格局代码量大，比较庞杂，不合适页面规划庞杂的大型网站，反而在博客，个人网站等比较小的网站上结果很好。
以上内容为笔者总结的一些挪动端开辟规划的小学问，笔者学问妙技有限，文章如有明白毛病的处所还请读者明白并指出，笔者会虚心学习。
