移动端布局多种实现方式

---

title: 移动端布局多种实现方式
date: 2017年9月17日 02:04:03
tags: css
categories: 教程
author: "JiaWei"

---

对比总结一下热门的解决方案

1. 通过媒体查询的方式即CSS3的 @media
2. 天猫首页使用的 flex 弹性布局
3. 淘宝首页使用的 rem+viewport缩放（Flexible.js）
4. hot.css

---

@media媒体查询

• 使用方法:
  @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时，应用下面的CSS样式/
  /你的css代码/
  }
• 优点:
  • 移动端和PC维护使用同一套代码时，方法简单，成本低。
  • 可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒
    体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
  • 调整屏幕宽度的时候不用刷新页面即可响应式展示。
• 缺点:
  • @media书写代码多，维护不方便
  • 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费。

---

Flex 弹性布局

建议参考阮一峰老师的flex教程
使用display:flex；进行移动端布局

---

Flexible- 使用rem+viewport进行布局

淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。lib-flexible是一个制作H5适配的开源库

1. 首先添加meta标签设置viewport
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
2. 引入Flexible的阿里CDN
   <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>或者可以通过github进行npm安装下载引入<script src="build/flexible_css.debug.js"></script> 和 <script src="build/flexible.debug.js"></script>

具体的入门教程可以看大漠大大的 "使用Flexible实现手淘H5页面的终端适配 "教程进行学习进阶)

---

hotcss · Github

插件描述：hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。

• 谁在用hotcss:
  • 熊猫TV
  • 美丽说HIGO
  • 奇虎360