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

自适应和响应式布局

---

一、 自适应

1. 自适应体验    http://m.ctrip.com/html5/
2. 自适应：为了解决在不同大小的设备上呈现相同的网页
3. 如何实现

• 自适应主要是指的宽度的自适应
• 百分比的流式布局

二、 swiper插件

1. 网站    http://www.swiper.com.cn/
2. 定义：开源、免费、强大的移动端触摸滑动插件
3. 作用

• 纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端
• 能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果

案例    http://www.swiper.com.cn/demo/index.html 使用方法    http://www.swiper.com.cn/usage/index.html

• 加载插件     swiper.min.js和swiper.min.css文件
• HTML内容
• 初始化Swiper：最好是挨着</body>标签
• 如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化

API     http://www.swiper.com.cn/api/index.html

• Swiper4.x的全部配置选项、方法、函数
  • Basic（Swiper一般选项）
  • speed：切换速度
• 组件
  • effect：切换效果

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

1. 由伊桑·马科特（Ethan Marcotte）提出
2. 将三种已有的开发技术整合起来，并命名

• 弹性布局
• 弹性图片
• 媒体和媒体查询

四、 媒体查询

1. 媒体查询(Media Queries)

• 媒体类型  All     Screen
• 
• 引入方式
  • @media方式 
  • link方法
• 媒体特性
  • 是CSS3对媒体类型的增强版
  • 可以将媒体特性看成：媒体类型（判断条件）+ CSS（符合条件的样式规则）
  • 

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

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

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

兼容性

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

五、 响应式布局优缺点

1. 优点

• 不同分辨率设备灵活性强
• 多终端视觉和操作体验好
• 响应式web设计中的大部分技术都可以用在WebApp开发中
• 节约开发成本，维护成本也轻松很多

缺点

• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长

六、 与自适应的区别

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

七、 rem响应式布局

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

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

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

九、总结