移动端布局多种实现方式
2017-09-17 本文已影响102人
是ADI呀
title: 移动端布局多种实现方式
date: 2017年9月17日 02:04:03
tags: css
categories: 教程
author: "JiaWei"
对比总结一下热门的解决方案
- 通过媒体查询的方式即CSS3的 @media
- 天猫首页使用的 flex 弹性布局
- 淘宝首页使用的 rem+viewport缩放（Flexible.js）
- 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适配的开源库
- 首先添加meta标签设置viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> - 引入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可以让移动端布局开发更容易。
