前端知道分享,移动端布局
来源:互联网 发布:世界上的另一个你知乎 编辑:程序博客网 时间:2024/06/05 02:58
下面我将简单的介绍移动端布
局的八种方式:
1.固定布局 2.流动布局 3.浮动布局 4.定位布局 5.混合布局 6.flex布局 7.rem布局 9.圣杯布局 10.双飞翼布局
1.固定布局方法里把加好,然后根据设计稿设定相应的宽度即可,其他地方类似于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和开发的工作量。
9.圣杯布局
利用float来实现,首先将三列放到一个父元素内后左浮动,之后给左右中分别设置宽度200px,250px,100%。之后给中间,右边分别设置margin-left为-200px,-250px。之后再将左右两列进行相对定位position:relative;并分别设置left:-200px;right:-250px;最后便是等高布局了,给左中右设置padding-bottom:2000px;margin-bottom:-2000px;给其父元素设置overflow:hidden即可。[图片上传中。。。(1)]
10.双飞翼布局
用float来实现,首先将左中右分别设置宽度为200px,100%,250px。中右分别设置margin-left为-200px和-250px.中间元素下有一个子元素,设置margin-left和margin-right分别为200px余250px。最后便是等高布局了,给左中右设置padding-bottom:2000px;margin-bottom:-2000px;给其父元素设置overflow:hidden即可。
0 0
- 前端知道分享,移动端布局
- 前端移动web布局总结
- 浅谈前端移动端页面开发(布局篇)
- 前端开发-移动端(3)- 响应式布局
- 浅谈前端移动端页面开发(布局篇)
- 浅谈前端移动端页面开发(布局篇)
- 【传智播客郑州校区分享】浅谈移动端布局问题
- 一些移动开发的前端框架分享
- 移动前端开发之布局篇
- web前端移动端
- 前端之移动端
- 前端之移动端
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
- 从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局,极其重要)
- 从零开始前端学习[39]:html5中的弹性布局二(移动端响应式实现各种布局,极其重要)
- 5大移动/前端开源项目你知道几个?
- 手机移动端的一些布局,视口知识的分享
- 移动端布局浅谈
- 让你的apk减减肥
- 一起学安全测试——Burp Suite Proxy与浏览器设置
- android中线程和进程
- 学习笔记
- POJ 3669 bfs
- 前端知道分享,移动端布局
- mssql用cmd命令执行*.sql文件
- jsp和servlet的区别
- ASP.NET MVC上传文件的方法
- 源码解析Android中View的measure量算过程
- 线程方法和对象
- 产生死锁的原因和必要条件+解决死锁的基本方法
- 计算机视觉领域的顶级国际会议和期刊列表
- Gradle 升级