web移动开发总结(一) - 好文

<>总结今天学习的内容:

* 移动web的概念和发展历史
* 移动web的开发方式和区别
* 响应式原理和媒体查询(重点)
* 响应式框架的介绍
* bootstrap框架的基本使用
* bootstrap全局CSS样式布局容器使用(重点)
* bootstrap全局CSS样式栅格系统使用(重点)
* bootstrap全局CSS样式响应式工具使用
* 微金所项目搭建和头部的结构 (重点)
<>web前端

* PC端的web ：在PC端电脑访问的web(网页网站) 页面一般固定宽度的居中在网页显示还有各种浏览器需要兼容
* 移动端的web：在手机端访问的web 页面一般是全屏的全屏在手机里面显示在手机端的浏览器内核都是统一webkit 很少考虑浏览器兼容性问题
<>移动web的概念和发展历史

*
什么是移动web: 就是运行在手机浏览器里面的web应用程序(网页) 虽然和网页是一样的，但是现代的web特别是移动web已经不再是简简单单的网页了
而是实现了和APP一样的功能所以现代的网页已经可以称之为应用程序了

*
移动端的浏览器：

* 移动端的浏览器和PC端有些不一样都是在手机上安装的浏览器常见有UC QQ 百度 safari 等
* 移动端浏览器都有一个共同的特点就是都是webkit内核的浏览器所以在浏览器的兼容性上相对PC端比较统一
*
常见的移动web应用程序：淘宝触屏版京东手机版苏宁手机版携程手机版小米手机版等等这些都是在手机端浏览器运行的应用程序

*
如何区分什么是网页什么是应用程序
应用程序是指运行时多数为了实现某个功能，就像网站的后台，网站更侧重于前台的美观展示。

*
移动web应用程序都有什么特点

* 通常移动web应用程序都是以m开头的站点例如m.taobao.com <http://xn--m-kb7av23a.taobao.com>
m.jd.com <http://m.jd.com>
* 通常移动web应用都是只运行在手机端设计功能也是符合手机的操作
* 页面都相对比较简洁使用起来比较方便
*
移动web的发展历史

* 从2014年HTML5正式定稿后移动web就迎来了飞速的发展因为使用HTML5技术可以更方便更快捷的开发现代web应用程序
* 而移动端的手机浏览器都是比较新的 HTML5在移动端的浏览器支持情况都比较好
* 所以HTML5主要应用就是在移动端移动web
* 直到2015 - 2016 - 2017 - 至今移动web已经发展了很多年各方面的技术都比较成熟稳定网上的教程也比较完整成熟
所以现在的web已经到全民移动web的时代了
<>移动web的开发方式

* 如何去开发移动web 了解常见的移动web的开发方式
* 响应式开发方式：开发一个页面同时运行在PC端和移动端针对不同的屏幕大小来自动适应屏幕展示对应端的页面的布局
* 原生的移动web开发方式：针对每一个端 PC端和移动端都分别开发1个页面 PC端加载PC端的页面移动端加载移动端的页面
* 两种方式的对比和应用场景
* 响应式开发：一个页面适配多个终端开发效率高维护效率高但是由于代码都在一个页面会造成冗余所以运行的效率低
应用在一些新建的网站同时把2个端都做完快速上线对页面加载性能要求不高使用响应式新闻网站官网活动页面等
* 原生移动web开发：要针对每个端都写1个页面开发维护效率低但是由于针对性强只有对应端需要的代码代码冗余少运行效率高
应用在一些老网站 PC已经上线单独开发移动端写2套代码对页面加载性能要求高使用原生电商直播视频聊天等
* 学习响应式开发方式
*
理解响应式开发的原理

* 获取屏幕的宽度去判断当前是属于什么屏幕
* 屏幕通常有4种
* 大屏幕屏幕宽度大于1200
* 中屏幕屏幕宽度大于992 小于等于1200
* 小屏幕屏幕宽度大于768 小于等于992
* 超小屏幕屏幕宽度小于等于768
* 根据不同的屏幕来改变页面的布局方式
*
如何判断和改变布局方式

* 使用JS判断和设置行内样式的方式
* 使用CSS3新增的属性媒体查询来判断屏幕宽度然后在媒体查询里面写需要改变的样式
*
媒体查询的语法
@media(条件){
//条件成立执行的代码
}
条件通常有3种写法
width:1200px; 表示屏幕宽度等于1200 条件成立
min-width:1200px; 表示屏幕宽度大于等于1200 条件成立
max-width:1200px 表示屏幕宽度小于等于1200 条成立
如果有多个条件可以使用 and相连
@media(条件) and (条件2){
//条件成立执行的代码
}
条件成立执行的代码就是普通的CSS 代码里面写选择{属性:值} 的方式当条件成立就会执行这个CSS样式

*
媒体查询条件的判断顺序

* 如果使用min-width作为条件判断的时候由于是大于等于的判断
假设屏幕1400 同时写了3个条件 min-widht:768px min-width:992px min-width:1200px
那么1400 大于 1200也大于992 也大于768 就意味着3个条件都能成立但是一般我们会取最大的屏幕的样式也就是1200
的所以写判断的时候要从小到大的方式写让大屏幕生效的样式把小屏幕的样式覆盖（向下覆盖）
min-width的写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Document</title> <style> * { margin: 0px; padding: 0px; /*设置盒模型包含边框*/
box-sizing: border-box; } .col { height: 100px; float: left; border: 1px solid
red; } /*如果有多个条件可以用 and连接*/ @media (min-width: 768px){ /*和CSS一样写选择器和属性和值*/
.col { width: 50%; } } /*如果有多个条件可以用 and连接*/ @media (min-width: 992px) {
/*和CSS一样写选择器和属性和值*/ .col { width: 33.33%; } } @media(min-width: 1200px) {
/*和CSS一样写选择器和属性和值*/ .col { width: 25%; } } /*如果有多个条件可以用 and连接*/ @media (
max-width: 768px) { /*和CSS一样写选择器和属性和值*/ .col { width: 100%; } } /* 由于CSS有层叠性
如果都写min-width 大于等于生效的判断小屏幕的判断和大屏幕的判断同时生效比如屏幕宽度1400 肯定大于1200 肯定大于 992 和 768
3个条件都满足但是由于CSS层叠性 1200 最上面 992 第二 768 第三 768把前面的样式都覆盖希望 1200 把 992 和 768 覆盖 */
/* 写媒体查询条件的时候如果使用min-width 大于等于做判断应该把条件从小到大写让大屏幕样式把小屏幕样式覆盖向下覆盖*/ </style>
</head> <body> <div class="row"> <div class="col">div1</div> <div class="col"
>div2</div> <div class="col">div3</div> <div class="col">div4</div> </div>
</body> </html>
max-width的写法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title> <style> * { margin: 0px; padding: 0px; /*设置盒模型包含边框*/
box-sizing: border-box; } .col { height: 100px; float: left; border: 1px solid
red; } @media(max-width: 1200px) { /*和CSS一样写选择器和属性和值*/ .col { width: 33.33%; }
} /*如果有多个条件可以用 and连接*/ @media (max-width: 992px) { /*和CSS一样写选择器和属性和值*/ .col {
width: 50%; } } /*如果有多个条件可以用 and连接*/ @media (max-width: 768px) {
/*和CSS一样写选择器和属性和值*/ .col { width: 100%; } } /*如果有多个条件可以用 and连接*/ @media (
min-width: 1200px) { /*和CSS一样写选择器和属性和值*/ .col { width: 25%; } } /* 由于CSS有层叠性
如果都写max-width 小于等于生效的判断小屏幕的判断和大屏幕的判断同时生效希望小屏幕生效例如 750宽度 max-width:1200;
max-width:992; max-width:768; 大家都成立希望生效 768最小那个需要把最小768判断写在最后面把前面2个覆盖 */ /*
写媒体查询条件的时候如果使用max-width 小于等于做判断应该把条件从大到小写让小屏幕样式把大屏幕样式覆盖向上覆盖*/ </style>
</head> <body> <div class="row"> <div class="col">div1</div> <div class="col"
>div2</div> <div class="col">div3</div> <div class="col">div4</div> </div>
</body> </html>
<>响应式的开发框架

*
框架帮你封装好了响应式的功能你只需要使用框架提供的类名既可实现响应式布局

*
常见的响应式开发框架

* bootstrap: 目前前端最流行的框架应用非常广泛移动 PC都可以使用代码风格很好让快速构建网页布局（重点）
* AmazeUI: 妹子UI 中国首个响应式开发框架
* layUI: 响应式模块的UI框架
* MUI ：中国人开发的针对移动端的UI 也有响应式功能（只适配手机和ipad）
* framework7：构造原生APP的框架 UI框架
<>了解bootstrap框架

bootstrap: 引导程序引导你开发程序
1. 2011 推特公司2个前端开发出来的框架后面开源了之后有很多贡献者一起参与开发形成了一个大型UI框架
2. Bootstrap框架：代码比较优雅结构很规范代码也很规范框架生态圈好使用和开发维护框架的人很多
3. Bootstrap的好处：让我们快速开发页面更方便更快捷

<>学习bootstrap

*
打开官网 https://v3.bootcss.com/ <https://v3.bootcss.com/>

*
下载bootstrap （推荐下载生产环境的bootstrap）
bootstrap-3.3.7-dist
如果下载整个源码需要解压使用里面的dist目录里面的代码

*
引入bootstrap

* 引入bootstrap.css 样式
* 引入jquery.js js 因为bootstrap基于jquery 需要先引入jquery
* 引入bootstrap.js JS插件的js文件
*
引包规范

* 如果依赖的先引入依赖的包在引入不依赖的包
* 有第三方的包先引入第三方的包再引入自己包
* CSS 文件通常引入在head中
* JS 文件通常引入在body的结束标签的上面（好处就是为了让页面迅速加载出来）
除了一些对页面渲染有帮助的JS必须放在前面
<>bootstrap文档(下面是要熟悉的文档,很重要,具体用法在这个网站:https://v3.bootcss.com/css/
<https://v3.bootcss.com/css/>)

* 全局CSS样式（一些简单的类名只要写类名就可以生效对应的样式）
* 布局容器
* container 固定宽度且居中的版心容器跟随页面的变化也会响应式变化宽度
* container-fluid 全屏容器
* 栅格系统百分比布局的一个栅格系统
* 分为行和列类似表格tr 和 td
* 列一行最多分为12列
* 列有4个类名分别对应4个屏幕生效列的类名
col-lg-x 大屏幕列的类名 large
col-md-x 中屏幕的列的类名 middle
col-sm-x 小屏幕的列的类名 small
col-xs-x 超小屏幕的列的类名 extra small
* 行必须包含在容器里面因为container有内边距padding
row为了和container的padding抵消就添加了margin-left的负值去抵消所以row需要包含在container容器里面
* 排版
文字对齐
* 表格
带边框带条纹等
* 表单
水平排列表单等
* 按钮
各种颜色尺寸按钮
* 辅助类
文本颜色浮动清除浮动显示隐藏
* 响应式工具
控制元素在某个屏幕隐藏显示
* 组件（静态的组件一些标签组合在一起形成的一个功能）
* 字体图标
* 下拉菜单
* 按钮组
* 导航导航条
* 分页
* 警告框
* 媒体对象
* 列表组
* 面板
* javascript插件（动态的组件一些标签组件在一起并且有js交互和功能）
* 模态框
* 下拉菜单插件(有交互的)
* 标签页 (tab栏)
* 工具提示
* 警告框弹出框
* Collapse 折叠菜单手风琴菜单
* Carousel 轮播图旋转木马
* Affix 吸顶效果
<>总结

*
移动web：移动端(手机端)打开网页网站

*
移动web 已经不仅仅实现内容显示而更多偏向应用能够提升上网体验生活体验称之为应用程序了

*
移动web: 包含了网页(暂时只学习网页网站) APP 微信小程序公众号内嵌页面

*
移动端浏览器：都是webkit内核兼容性少

*
移动web的开发方式

* 响应式方式(一般使用框架)：一个页面同时适配多个终端根据屏幕变化而自动适应变化
应用：新建的网站或者对性能要求不是很高官网论坛播客
* 原生方式：针对每个端都写一个页面写死的
应用：老网站或者对性能要求很高的电商直播视频
*
响应式开发原理

* 使用JS判断屏幕宽度修改样式
* 使用媒体查询判断设置样式
* 4种屏幕需要判断
* 大屏幕lg w >= 1200
* 中屏幕md w >= 992 w < 1200
* 小屏幕sm w >= 768 w < 992
* 超小屏幕xs w < 768
* 媒体查询的语法
@media(条件){
//条件成立执行的代码
}
条件通常有3种写法
width:1200px; 宽度等于这个值
min-width:1200px; 宽度大于等于这个值条件从小到大写让大的把小的覆盖
max-width:1200px; 宽度小于等于这个值条件从大到小写让小的把大的覆盖
*
响应式开发框架：为了让响应式开发更简单快捷

* bootstrap (重点掌握所有UI框架基础)
* 妹子UI
* layUI
* MUI
* framework7
*
使用bootstrap

* 下载包
* 引包
1. 引入bootstrap.css
1. 引入jquery.js （bootstrap JS插件基于jquery）
1. 引入bootstrap.js
* 使用文档里面的代码就有对应的效果
*
bootstrap文档

* 全局CSS样式：简单的类名加了就有效果跟标签无关
* 组件：组合多个标签类名在一起形成的静态效果就是组件
* JS插件 : 在静态组件的基础上添加了交互能够点击能够动等就是插件
*
布局容器

* container 居中
* container-fluid 全屏
* 2个容器都有padding 要让内容往里面靠左右15px
*
栅格系统

* 通过行和列组成的布局一个系统
* 行row 列 col 类似表格的tr td
* 一行最多分为12列
* 行必须放到container 容器里面或者 col里面要和父容器padding抵消
* 列需要放到行里面
* 内容放到列里面
* 4个栅格类名 col-lg col-md col-sm col-xs 分别会在对应的屏幕生效
* 列12 自由划分也可以等比例划分等比例只能被12整除的 1 2 3 4 6 12
* 栅格系统还可以嵌套嵌套的子row 参照父元素
*
常用的样式组件插件

*
搭建微金所项目

* 创建项目文件夹把css fonts img lib复制到项目文件夹(来源完整版) lib 就是第三方的包
* 创建主页引包
* 写结构把页面分区域头部导航轮播图特色预约商品新闻合作伙伴
* 推荐容器使用id 方便覆盖样式和方便JS获取元素
* 使用bootstrap构建页面的内容
* 头部：全局样式里面的：容器栅格系统组件：字体图标
* 导航：组件：导航条
* 轮播图： JS插件：carousel轮播图插件
* 特色介绍：全局样式：容器栅格系统组件：字体图标媒体对象

热门工具换一换