说一下自己对移动端适配的一个体会吧,理论就不多说了,咱们重点说方法:
移动端适配大致有三种适配方案加上常用的布局方案
三种适配方案:
一、 百分比适配(%)
百分比主要在于主视角的定位和缩放,百分比的取值以原设计稿的尺寸为标准。
举个例子,一个元素在原设计稿里,量出来距离顶部是 200px,如果写死可能是top:200px 或者margin-top:200px,现在要转成百分比,那么这个值可能就是20%。这个值怎么算?如果设计稿是 1080,200/1080=18.51% 这样计算出来百分比的值。
注意:
流体布局下,百分比的值是根据父层计算的;absolute布局的元素是根据最近的relative父层计算的;fixed布局的元素是根据window的可视区域计算的。
所以,如果要达到适配的效果,不只是当前元素需要用百分比值,其参考计算的元素也是要动态变化的。
二、rem适配
rem适配是改变一个元素在不同设备上占据的CSS像素个数
注意:谷歌下字体的默认大小为16px,rem取决于根标签的font-size(默认1rem)
第一步:使用完美视口
第二步:使用js改变网页的font-size
Var styleNode = document.createElement("style"); Var w = document.documentElement.clientWidth/16;styleNode.innerHtml = "html{fontsize:"+w+"px!important}";document.head.appendChild("styleNode")但是使用rem适配,从px值转换为rem相对复杂,这里又推荐一个网站,程序员在线工具之px转rem
链接地址:http://www.ofmonkey.com/front/rem
三、viewport适配:所量即所得
viewport适配是讲布局视口宽度调整为设计图的宽度
四、布局方式
布局方式也有很多吧,这里说一下flex弹性布局
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
容器的属性:
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content