移动前端开发布局总结

前端移动开发布局问题|app前端开发开发布局|前端开发布局面试题

下面我将简单的介绍移动端布局的八种方式:
1.固定布局
2.流动布局
3.浮动布局
4.定位布局
5.混合布局
6.flex布局
7.rem布局
8.响应式布局

1.固定布局
方法
<head>里把<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″>加好,然后根据设计稿设定相应的宽度即可,其他地方类似于pc端。
优点
思路沿用pc端,上手比较快
缺点
大屏手机显示网页比较宽,而固定布局宽度参照永远是固定的宽度(设计稿的大小),导致左右两边会有空白。手机横屏的时候两边空白更亮。
2.流动布局
方法
适用百分比做单位。
优点
能更很好的适应各个屏幕分辨率的手机。
缺点
不够灵活,添加元素时,需要更改其他元素的值。
3.浮动布局
方法
float+clearfix(清除浮动)
css 代码

/*–不需兼容老版本–*/
.clearfix:after {
content:””;
display:block;
clear:both;
}
/*–需要兼容老版本–*/
.clearfix:after {
content:””;
display:block;
clear:both;
height:0;
visibility:hidden;
}
**优点**
    这是传统的浮动方式,写法简单,实现效果起来干脆利落
**缺点**
    对浮动元素要求比较严格,布局也不太灵活

4.定位布局
方法
在布局当中很常用,利用position+四个方位的具体值(top/left/right/bottom)相互配合,实现起来也比较容易
优点
实现简单,在移动端中,定位很常用,尤其是弹窗,
css 代码

.mask {
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}
**缺点**
    移动端中频繁的使用定位,会出现一些莫名的bug;
    fixed+input在ios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时,换气键盘,会出现定位的元素被抬升至手机键盘的上方。

5.混合布局
方法
所谓混合布局,就是把所有学到的知识灵活运用在布局中。例如:rem+百分比(流动布局) flex+rem等
优点
布局灵活,集合其他布局的优势达到自己的布局要求
缺点
代码有点累赘;代码不统一,维护困难
6.flex布局
方法
也叫弹性布局。
css 代码

/*–只需父元素设置–*/
{
    display: -webkit-box;
    /*android2.1-3.0 ios 3.2-4.3*/
    display: -moz-box;
    /*firefox*/
    display: -webkit-flex;
    /*chrome 21+*/
    display: -ms-flexbox;
    /*wp ie 10*/
    display: flex;
    /*android 4.4*/
}
/*–然后子元素设置相应的比例–*/
{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
    这个是最简单的flex布局了,其实弹性布局里面还有很多简单高效实用的属性,很方便移动端的布局。
 **优点**
    自适应很好,灵活性很强,目前在移动端应用的还是比较广泛。
 **缺点**
    需要写很多兼容代码。

7.rem布局
方法
rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的font-size大小就可以控制rem的大小。有以下两种适配方式:
1.rem+@media(通过媒体查询设置html的font-size值,达到自适应)
css 代码

    -webkit-text-size-adjust: none;
    font-size: 10px;
}
@media screen and (min-width:321px) and (max-width:375px) {
    html {
        font-size: 10px;
    }
}
@media screen and (min-width:376px) and (max-width:414px) {
    html {
        font-size: 10.25px;
    }
}
@media screen and (min-width:415px) and (max-width:454px) {
    html {
        font-size: 10.5px;
    }
}
@media screen and (min-width:455px) and (max-width:554px) {
    html {
        font-size: 10.75px;
    }
}
@media screen and (min-width:455px) {
    html {
        font-size: 11px;
    }
}
    2.rem+js(通过js自动获取设备宽度,计算得到相应设备下html的font-size值达到自适应)
    **javascript 代码**
! function (n) {
    var e = n.document,
        t = e.documentElement,
        i = 720,
        d = i / 100,
        o = “orientationchange” in n ? “orientationchange” : “resize”,
        a = function () {
            var n = t.clientWidth || 320;
            n > 720 && (n = 720),
                t.style.fontSize = n / d + “px”
        };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener(“DOMContentLoaded”, a, !1))
}(window);
**优点**
    在任何设备下都可以达到完全适配,页面布局样式完全自适应
**缺点**
    rem+@media这种方式不能所有设备全适配

8.响应式布局
方法
使用@media(媒体查询)设置页面在不同的屏幕宽度下达到自适应以及响应式(根据不同屏幕大小,页面布局,样式会做出相应的调整)典型案例(bootStrap官网)
优点
不仅在不同的屏幕下达到自适应,还会在相应的屏幕下对页面布局,样式做出相应的调整,达到更加的用户体验
缺点
兼容各种设备工作量大,效率低下;代码累赘,会出现隐藏无用的元素,加载时间过长;一定程度上改变了网站原有的布局结构,会出现用户混淆的情况;增加UI和开发的工作量。

web前端开发全套教程|前端移动开发总体布局|移动平台4g手机网站前端开发布局技巧汇总

» 本文来自:前端开发者 » 《移动前端开发布局总结》
» 本文链接地址:https://www.rokub.com/3986.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!