移动端：自适应和响应式布局

自适应和响应式布局

---

1、 自适应

1. 自适应体验    http://m.ctrip.com/html5/
2. 自适应：为了解决在不一样大小的设备上呈现相同的网页
3. 如何实现
• 自适应主要是指的宽度的自适应
• 百分比的流式布局

2、 swiper插件

1. 网站    http://www.swiper.com.cn/
2. 定义：开源、免费、强大的移动端触摸滑动插件
3. 做用
• 纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端
• 能实现触屏焦点图、触屏Tab切换、触屏多图切换等经常使用效果
4. 案例    http://www.swiper.com.cn/demo/index.html
5. 使用方法    http://www.swiper.com.cn/usage/index.html
• 加载插件     swiper.min.js和swiper.min.css文件
• HTML内容
• 初始化Swiper：最好是挨着</body>标签
• 若是不能写在HTML内容的后面，则须要在页面加载完成后再初始化
6. API     http://www.swiper.com.cn/api/index.html
• Swiper4.x的所有配置选项、方法、函数
• Basic（Swiper通常选项）
• speed：切换速度
• 组件
• effect：切换效果

3、响应式设计（RWD，Responsive Web Design）

1. 由伊桑·马科特（Ethan Marcotte）提出
2. 将三种已有的开发技术整合起来，并命名
• 弹性布局
• 弹性图片
• 媒体和媒体查询

4、 媒体查询

1. 媒体查询(Media Queries)
• 媒体类型  All     Screen
• 引入方式
  • @media方式 
  • link方法
• 媒体特性
  • 是CSS3对媒体类型的加强版
  • 能够将媒体特性当作：媒体类型（判断条件）+ CSS（符合条件的样式规则）

  • 语法：@media  媒体类型  and  （媒体特性）{  CSS样式 }

• 关键词
  • and：同时知足这二者时生效，到达限定范围
  • only：指定某种特定的媒体类型，能够用来排除不支持媒体查询的浏览器

  • not：排除某种指定的媒体类型，即排除符合表达式的设备

2. 兼容性
   1. 移动终端上通常对css3支持比较好的高级浏览器不须要考虑响应式布局的媒体查询的兼容问题
   2. IE8及如下版本浏览器不支持媒体查询

5、 响应式布局优缺点

1. 优势
• 不一样分辨率设备灵活性强
• 多终端视觉和操做体验好
• 响应式web设计中的大部分技术均可以用在WebApp开发中
• 节约开发成本，维护成本也轻松不少
2. 缺点
• 兼容各类设备工做量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长

6、 与自适应的区别

• 响应式的概念覆盖了自适应，可是包括的东西更多。响应式布局能够根据屏幕的大小自动的调整页面的展示方式，以及布局
• 自适应仍是暴露出一个问题，若是屏幕过小，即便网页可以根据屏幕大小进行适配，也会感受在小屏幕上查看，内容过于拥挤
• 响应式解决了自适应布局的问题。它能够自动识别屏幕宽度、并作出相应调整，布局和展现的内容可能会有所变更

7、 rem响应式布局

• 若是移动端页面只在移动端访问，那么使用rem能够实现响应式布局
• 实现原理
• 动态改变 html的font-size值的大小，来完成rem实现响应式布局
• rem 的值都是根据html的fontsize进行计算的
• 统一缩放元素大小，只要修改html的fontsize

8、 使用rem开发响应式布局步骤

• 从Ui设计师拿到设计稿，通常尺寸都是以iphone 6的尺寸为准 750*1334（638*1136）
• 在样式中给html设定一个fontsize的值，咱们通常设置一个方便后续计算的值，例如10px、100px等，咱们使用100px
• 写样式
• 彻底按照设计稿的尺寸来写样式，设计稿上的长度、height、margin、padding、字体的值是多少，咱们就写多少，这样能够100%还原设计稿
• 注意：须要把获得的像素值/100px,转换为rem单位
• 根据当前屏幕的宽度和设计稿的宽度来从新计算html的FontSize的大小
• 根据当前屏幕宽度和设计稿的宽度的比例，动态计算当前宽度下的fontsize值大小，若是fontsize值改变了，以前设定的全部的rem单位的值自动会跟着改变

9、总结