手机端页面重构布局8大办法

2019-09-10 郑州网站建设  

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(
清除浮动)

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

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1711.html转载请标明出处,谢谢合作!
标签:
  • 布局
  • 方法
  • meta
  • head
  • 固定
  • 1.
  • 8