下面我将简单的介绍移动端布局的八种方式: 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 代码
- 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 值达到自适应)
**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 和开发的工作量.
来源: http://www.qdfuns.com/article/18271/5c61f534e9f371f6c23c2fcd87866c04.html