HTML移动端页面重构布局8大方法

1.固定布局
    方法
 里把加好,然后根据设计稿设定相应的宽度即可,其他地方类似于pc端。    

优点
        思路沿用pc端,上手比较快
    缺点
        大屏手机显示网页比较宽,而固定布局宽度参照永远是固定的宽度(设计稿的大小),导致左右两边会有空白。手机横屏的时候两边空白更亮。
2.流动布局
    方法
        适用百分比做单位。
    优点
        能更很好的适应各个屏幕分辨率的手机。
    缺点
        不够灵活,添加元素时,需要更改其他元素的值。
3.浮动布局
    方法
        float+clearfix(清除浮动)

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

 缺点
        移动端中频繁的使用定位,会出现一些莫名的bug;
        fixed+inputios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时,换气键盘,会出现定位的元素被抬升至手机键盘的上方。
5.混合布局
    方法
        所谓混合布局,就是把所有学到的知识灵活运用在布局中。例如:rem+百分比(流动布局)  flex+rem
    优点
        布局灵活,集合其他布局的优势达到自己的布局要求
    缺点
        代码有点累赘;代码不统一,维护困难
6.flex布局
     方法
        也叫弹性布局。

这个是最简单的flex布局了,其实弹性布局里面还有很多简单高效实用的属性,很方便移动端的布局。
     优点
        自适应很好,灵活性很强,目前在移动端应用的还是比较广泛。
     缺点
        需要写很多兼容代码。
7.rem布局
    方法
        rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置htmlfont-size大小就可以控制rem的大小。有以下两种适配方式:
        1.rem+@media(通过媒体查询设置htmlfont-size值,达到自适应)

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

你可能感兴趣的:(H5)