移动端页面重构布局8大方法_第1页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、移动端页面重构布局8大方法1.固定布局 办法 里把加好，然后按照设计稿设定相应的宽度即可，其他地方类似于pc端。 优点 思路沿用pc端，上手比较快 缺点 大屏手机显示网页比较宽，而固定布局宽度参照永久是固定的宽度（设计稿的大小），导致左右两边会有空白。手机横屏的时候两边空白更亮。 2.流淌布局 办法 适用百分比做单位。 优点 能更很好的适应各个屏幕辨别率的手机。 缺点 不够灵便，添加元素时，需要更改其他元素的值。 3.浮动布局 办法 float+clearfix(清除浮动) 优点 这是传统的浮动方式，写法容易，实现效果起来索性利落 缺点 对浮动元素要求比较严格，布局也不太灵便 4.定位布局 办

2、法 在布局当中很常用，利用position+四个方位的详细值（top/left/right/bottom）互相协作，实现起来也比较简单 优点 实现容易，在移动端中，定位很常用，尤其是弹窗， 缺点 移动端中常见的用法定位，会浮现一些莫名的bug; fixed+input在ios上存在bug,会浮现用法fixed布局的元素乱掉。在android手机上当input框猎取焦点时，换气键盘，会浮现定位的元素被抬升至手机键盘的上方。 5.混合布局 办法 所谓混合布局，就是把全部学到的学问灵便运用在布局中。例如：rem+百分比(流淌布局) flex+rem等 优点 布局灵便，集合其他布局的优势达到自己的布局

3、要求 缺点 代码有点累赘；代码不统一，维护困难 6.flex布局 办法 也叫弹性布局。 这个是最容易的flex布局了，其实弹性布局里面还有无数容易高效有用的属性，很便利移动端的布局。 优点 自适应很好，灵便性很强，目前在移动端应用的还是比较广泛。 缺点 需要写无数兼容代码。 7.rem布局 办法 rem是通过根元素举行适配的，网页中的根元素指的是html我们通过设置html的font-size大小就可以控制rem的大小。有以下两种适配方式： 1.rem+media(通过媒体查询设置html的font-size值，达到自适应) 8.响应式布局 办法 用法media(媒体查询)设置页面在不同的屏幕宽度下达到自适应以及响应式（按照不同屏幕大小，页面布局，样式会做出相应的调节）典型案例（bootstrap官网） 优点 不仅在不同的屏幕下达到自适应，还会在相应的屏幕下对页面布局，样式做出相应的调节，达到越发的用户体验 缺点 兼容各种设备工作量大，效率低下；代码累赘，会浮现躲藏无用的元素，加载时光过

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论