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

拼搏现实的明天。 2021-07-04 13:25 461阅读 0赞

## 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`布局 ##

**方法**  
也叫弹性布局。  
这个是最简单的`flex`布局了，其实弹性布局里面还有很多简单高效实用的属性，很方便移动端的布局。  
**优点**  
自适应很好，灵活性很强，目前在移动端应用的还是比较广泛。  
**缺点**  
需要写很多兼容代码。

## 7.`rem`布局 ##

**方法**  
`rem`是通过根元素进行适配的，网页中的根元素指的是`html`我们通过设置`html`的`font-size`大小就可以控制`rem`的大小。有以下两种适配方式：

1.`rem+@media(通过媒体查询设置html的font-size值，达到自适应)`

## 8.响应式布局 ##

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