移动端完结

本周总结

1、rem适配方案2

2、响应式开发布局

3、移动端总结

一、rem适配方案2

flexible.js+rem

flexible.js将页面分为10等分，因为其中增加了js成分，所以当屏幕变化时，比例不变。

因此我们需要做的就是设置html的字体大小

比如当前设计稿是750px，那么我们只需要把html大小设置为75px（750px/10）就可以。里面页面

元素rem值：页面元素的px值 / 75。剩余的，让flexible.js去算。

二、响应式开发布局

2.1什么是Bootstrap?

简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前

端框架之一。Bootstrap是基于HTML,CSS,Javascript的。

准确来说Bootstrap是一套架构：有一套比较完整的网页功能解决方案，控制权在架构本身。有预

制式库，组件，插件，使用者要按照所规定的某种规范开发。

优点：

标准化的HTML、CSS、JS编码规范

提供了一套简洁、直观强悍的组件

有自己的生态圈，不断更新迭代

让开发更简单，提高了开发效率

2.2、开发原理

        就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同的设备。

根据不同设备宽度，设备可划分为：

超小屏幕（手机）	<768px
小屏设备（平板）	>=768px~<992px
中等屏幕（桌面显示屏）	>=992px~<1200px
宽屏设备（大桌面显示器）	>=1200px

2.3、响应式布局容器

响应式需要一个父级作为布局容器来配合子元素实现变化效果。原理就是在不同屏幕下通过媒体查

询来改变容器大小，再改变子元素的排列和大小，从而实现不同屏幕，不同页面的布局和样式变

化。

Bootstrap需要为页面内容和栅格系统包裹一个container容器。Bootstrap预先定义好这个类

        1、container类：响应式的容器，固定宽

        2、container-fluid类：流式布局容器。占据全部视口的容器，适用于单独做移动端开发。

超小屏幕（手机）	<768px	宽设为100%
小屏设备（平板）	>=768px~<992px	宽设为750px
中等屏幕（桌面显示屏）	>=992px~<1200px	宽设为970px
宽屏设备（大桌面显示器）	>=1200px	宽设为1170px

2.4、Bootstrap使用

        1、创建文件夹结构：关键创建Bootstrap的文件夹

        2、创建Html骨架结构：解决浏览器版本问题

        3、引入相关样式文件

        4、书写内容：直接拿bootstrap余、预先定义好的样式来使用

                                修改bootstrap原来的样式，但要注意权重问题

                                学好bootstrap的关键在于知道定义的样式以及实现的效果

2.5、boootstrap的栅格系统

        2.5.1、栅格系统简介：

        Bootstrap包含了一个响应式的，移动设备优先的，不固定的网格系统，可以随着设备或者视

口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成

更多语义布局的强大的混合类。

        原理：将页面布局划分为等宽的列，然后通过列数定义来模块化页面布局，随着屏幕尺寸的

增加，系统自动的划分为12列。container的宽度是一定的，但在不同的屏幕下，container宽度不

同，再把container划分为12等份。

        2.5.2、栅格系统选项参数

栅格系统用于一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建的布局中。

• 我们实现列的平均划分，需要给列再增加列前缀
•  行（row）必须放进container布局的容器内
• 每一列默认有15px左右的padding值
• xs-extra small 超小     sm-small 小    md-medium  中等     lg-large 大
• 可以同时为一列指定多个设备名，以便划分不同份数。例“col-md-4  col-sm-6"表示在不同设备下该元素所占份数由4变为6。

屏幕宽度	类名
<768px(手机）	.col-xs-
>=768px(平板）	.col-sm-
>=992px	.col-md-
>=1200px	,col-lg-

如果孩子的份数相加等于12，则占满container宽度

如果孩子的份数相加小于12，则占不满container宽度，有空白

如果孩子的份数相加大于12，则超出的那一列会换行显示

        2.5.3、列嵌套

栅格系统内置的栅格系统将内容再次嵌套，简单理解就是一个列内再分若干等份小列，可通过添加一个新的row元素和一系列.col-sm-*到已存在的.col-sm-*元素内

列嵌套最好加一个行row，这样可以消除父元素padding值，而且高度和父元素一样高。

        2.5.4、列偏移

使用.col-md-offset-*类可以将列向右偏移。这些类实际是通过使用*选择器为当前元素增加了左侧边距（margin）

<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
</div>

居中对齐：col-md-X   col-md-offset-*     *=(12-X)/2

        2.5.5列排序

通过使用.col-md-push-* 和.col-md-pull-*可以很轻易改变列的顺序。

        2.5.6响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询工作并使这些工具类可以方便地针对不同设备展示或隐藏页面内容。

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	显示	显示	显示
.hidden-sm	显示	隐藏	显示	显示
.hidden-md	显示	显示	隐藏	显示
.hidden-lg	显示	显示	显示	隐藏

 也与之相反的是visible-xs  visible-sm  visible-md  visible-lg添加此类名会显示某些内容。

三、移动端总结

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。所以在开发时应掌握视口问题和布局方式（单独制作和响应式页面）。