RSS订阅 微信
当前位置：前端ABC > Html与Css教程 > 正文

移动端页面重构布局（layout）

下面我将简单的介绍移动端布局的八种方式：
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(清除浮动)

/*--不需兼容老版本--*/
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
/*--需要兼容老版本--*/
.clearfix:after{
    content:"";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

优点
这是传统的浮动方式，写法简单，实现效果起来干脆利落
缺点
对浮动元素要求比较严格，布局也不太灵活
4.定位布局
方法
在布局当中很常用，利用position+四个方位的具体值（top/left/right/bottom）相互配合，实现起来也比较容易
优点
实现简单，在移动端中，定位很常用，尤其是弹窗，

.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布局
方法
也叫弹性布局。

/*--只需父元素设置--*/
{
    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值，达到自适应)

html{
    -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值达到自适应）

!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和开发的工作量。

欢迎分享本文，转载请保留出处：前端ABC » 移动端页面重构布局（layout）

分享到：更多 ()
标签：

相关推荐

发表评论 0

取消