前言

这次想要分享的是后面几个比较重要的部分，包括rem适配方案、响应式开发和Bootstrap前端开发框架。

一、rem适配方案

1．我们适配的目标是什么?

让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。

2.怎么去达到这个目标的?

使用媒体查询根据不同设备按比例设置html的字体大小，
然后页面元素使用rem做尺寸单位，当html字体大小变化
元素尺寸也会发生变化，从而达到等比缩放的适配。

3、 rem实际开发适配方案

①按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小: (媒体查询)
②CSS中，设计稿元素的宽、高、相对位置等取值。按照同等比例换算为rem为单位的值;

4.rem适配方案技术使用(市场主流)

技术方案1
less 媒体查询 rem
技术方案2 (推荐)
flexiblejs+rem
总结:
两种方案现在都存在。
方案2更简单，现阶段大家无需了解里面的js代码。

5、rem +媒体查询+ less技术

动态设置html标签font-size大小
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份(划分标准不一-可以是20份也可以是10等份)
③每一份作为htmI字体大小。这里就是50px
④那么在320px设备的时候,字体文小为320/15就是21.33px
⑤用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100*100像素的页面元素在750屏幕下，就是100/ 50转换为rem是2rem * 2 rem比例是1比1
⑧320屏幕下， html字体大小为21.33 则2rem= 42.66px此时宽和高都是42.66 但是宽和高的比例还是1比1
⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

元素大小取值方法
①最后的公式:页面元素的rem值=页面元素值(px) / ( 屏幕宽度1划分的份数)
②屏幕宽度/划分的份数就是html font-size的大小.
③或者:页面元素的rem值=页面元素值( px) / html font size字体大小

6.简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以里面页面元素rem值:页面元素的px值/75
剩余的，让flexible.js来去算
设置视口标签以及引入初始化样式还有js文件
<meta name="viewport" content="width=device-width，user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/inlex.css">

我们页面需要引入这个is文件
在index.html 中引入flexible.js 这个文件
<script src="js/f1exible.js"> </script>

还需要在VSCode下载 px 转换rem插件cssrem
设置html字体大小基准值

4. body大概样式
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: F2P2F2:
}

二、响应式开发原理

就是使用媒体查均针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备划分尺寸区间
超小屏幕(手机) <768px
小屏设备(平板) >= 768px ~ <992px
中等屏幕(桌面显示器) >= 992px ~ <1200px
宽屏设备(大桌面显示器) >= 1200px

1.响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分
超小屏幕(手机，小于768px ):设置宽度为100%；小屏幕(平板,大于等于768px):设置宽度为750px
中等屏幕（桌面显示器,大于等于992px):宽度设置为970px；大屏幕(大桌面显示器,大于等于1200px):宽度设置为1170px

三、 Bootstrap前端开发框架

1 、Bootstrap简介

框架:顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发的，它简洁灵活,使得Web开发更加快捷。
●中文官网: http://www.botcss.com/
●官网: http://getbootstrap.com/
●推荐使用: http://bootstrap.css88.com/
优点
标准化的html+css编码规范
提供了一套简洁、直观强悍的组件
有自己的生态圈 ,不断的更新迭代
让开发更简单 ,提高了开发的效率E

2. Bootstrap使用

控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
Bootstrap使用四步曲: 1.创建文件夹结构2. 创建html骨架结构3. 引入相关样式文件4.书泻内容

2.1 创建html骨架结构

<script src="https://oss .maxcdn . com/ respond/1.4.2/respond. min. js"></script>
<! lendifl-->

2.2 引入相关样式文件

<link rel="stylesheet" hre f="bootstrap/css/bootstrap .min.css">

2.3 书写内容

直接拿Bootstrap预先定义好的样式来使用
修改Bootstrap 原来的样式,注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

3.布局容器

Bootstrap需要为页面内容和栅格系统包裹一个 .container容器, Bootstarp预先定义好了这个类,叫.container，类它提供了两个作此用处的类。必须使用这个

3.1. container类

响应式布局的容器固定宽度
大屏(>=1200px) 宽度定为1170px
中屏(>=992px)宽度定为970px
小屏(>=768px)宽度定为750px
超小屏(100%)

3.2. container-fluid类

流式布局容器百分百宽度.
适合于单独做移动端开发
占据全部视口 ( viewport)的容器。

4. 栅格系统简介

栅格系统它是指将页面布局划分为等宽的列 ,然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口( viewport )尺寸的增加,系统会自动分为最多12列。
Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12等份

4.1 栅格选项参数

栅格系统用于通过一列的行( row )与列( column )的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
类前缀
.col-xs- 超小 .col-sm- 小 .col-md- 中等 .col-Ig- 宽屏列( column)数 12
行 ( row )必须放到container布局容器里面,我们实现列的平均划分
可以同时为一列指定多个设备的类名，以便划分不同份数例如cidss=" cui-mui-4 cu-511-0”

4.2 列嵌套

简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素
和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
我们列嵌套最好加1个行row这样可以取消父元素的padding值而且高度自动和父级一样高

<div class="col-sm-4">
<div class-"row">
<div class="co1-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>

4.3 列偏移

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

<div class= ”row">
<div class="co1-1g-4">1</div>
<div class="col-1g-4 col-lg-offset- 4">2</div>
</div>

4.4 列排序

通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列( column )的顺序。

<div class="row">
<div class="co1-1g-4 col-1g-push-8">左侧</div>
<div class="co1-1g-8 col-1g-pu11-4">右侧</div>
</div>

4.5 响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些类可以方便的针对不同设备展示或隐藏页面内容。
类名超小屏小屏中屏大屏
.hidden-xs 隐藏可见可见可见
.hidden-sm 可见隐藏可见可见
.hidden-md 可见可见隐藏可见
.hidden-lg 可见可见可见隐藏
与之相反的,是visible xS visible-sm visible -md visible-lg是显示某个页面内容
Bootstrap其他(按钮、表单、表格)请参考Bootstrap 文档。

前端之移动web开发（下）相关推荐

前端VS后端Web开发
前端VS后端-Web开发介绍前端开发后端开发如果您是一名开发人员,则只是学习编码而希望专注于Web开发,但对走上哪条道路感到困惑.是前端Web还是后端Web开发,或者您是否已经开始了自己的旅程 ...
前端入门前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
前端移动端web开发（一）
一.前端开发 1.前端开发分类: PC端开发:页面主要运行在PC端浏览器中移动端开发:页面主要运行在手机上移动web开发在移动端表现良好的页面,如新浪网混合式开发(Hybrid App) 也叫 ...
Web前端：面向Web开发人员的顶级JavaScript开发工具和IDE
JavaScript是最流行的编程语言并且受到所有浏览器的支持,增强了用户与网页的交互.也就是说,许多JavaScript IDEs现在提供智能课程完成和实时消除错误. 这些有效的工具带有精确的语 ...
web后端开发需要会前端吗_前端和后端Web开发之间的区别
web后端开发需要会前端吗 In this post I want to help you conceptually make the move from frontend to backend, i ...
web前端angular_针对Web开发人员的十大Angular课程，教程和书籍
web前端angular 大家好,如果您有兴趣学习Angular框架 (一种最流行JavaScript框架之一,用于开发基于组件的Web GUI并寻找一些很棒的资源,如课程,教程和书籍),那么您来对地 ...
前端之移动web开发学习
移动端浏览器的现状移动端的浏览器基本上是由webkit发展而来的,所以只需要采用处理webkit浏览器的方法即可,也就是说移动端的没有pc那么多的兼容性问题. 手机屏幕现状做为开发人员来说,对于分 ...
web开发下的各种下载方法
利用TransmitFile方法,解决Response.BinaryWrite下载超过400mb的文件时导致Aspnet_wp.exe进程回收而无法成功下载的问题. 代码如下: Response.Co ...
迈入现代 Web 开发（GMTC 2021 演讲全文）
前言:希望像做游戏一样做 Web 开发的 dexteryy 同学今天在 GMTC 技术大会上又搞了一场「跨年演讲」(内容超多的意思),不但现场爆满.超时严重,而且一如既往的讲完之后只要把讲稿和幻灯片拼 ...

前端之移动web开发（下）

前言