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 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作为条件判断的时候 由于是大于等于的判断
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/
下载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/)
- 全局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轮播图插件
- 特色介绍: 全局样式: 容器 栅格系统 组件: 字体图标 媒体对象
web移动开发总结(一)相关推荐
- 基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述 二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求 三.具体 ...
- 读书笔记:编写高质量代码--web前端开发修炼之道(二:5章)
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- 参加web前端开发培训具体要学什么内容
学习web前端技术不是一天两天就能学会的,想要成为一名合格的web前端工程师,一定要进行系统的培训学习,那么下面小编就为大家详细的介绍一下参加web前端开发培训具体要学什么内容? 参加web前端开发培 ...
- 零基础如何掌握web前端开发技能
很多零基础学员想要进入到互联网行业都会选择web前端做首选技术语言来学习,但是学习web前端不是那么容易的,想要成为一名合格的web前端工程师,所要掌握的技能一定要会,下面小编就为大家详细的介绍一下零 ...
- 学习web前端开发要注意什么
web前端的发展前景有目共睹,越来越多的人都对web前端这门编程语言非常感兴趣,想要学习web前端技术,那么学习web前端开发要注意什么呢?大家在学习之前是否有做好这些功课呢?来看看下面的详细介绍吧. ...
- 学好web前端开发要注意哪些问题
web前端学起来是比较困难的,当然想要学好web前端技术,那么有一些注意事项一定是要看的,下面小编就为大家详细的介绍一下学好web前端开发要注意哪些问题? 学好web前端开发要注意哪些问题? 基础 ...
- web前端开发培训有哪些学习阶段
web前端技术主要针对于移动互联网是比较多的,对于零基础的同学来说前期主要学习基本的静态布局,HTML + CSS,下面是web前端开发培训有哪些学习阶段的具体内容. web前端开发培训有哪些 ...
- web前端开发培训完就业前景怎么样
很多人都在学习web前端技术,认为学好这一项编程技术,找工作是非常稳定的,那么到底web前端开发培训完就业前景怎么样呢?来看看下面的详细介绍就知道了. web前端开发培训完就业前景怎么样? web前端 ...
- 什么人适合学习web前端?怎样学好web前端开发?
web前端在IT互联网行业的发展前景是非常可观的,越来越多的人都在学习web前端技术,那么什么人适合学习web前端?怎样学好web前端开发?相信大家都想了解这些问题,我们来看看下面的详细介绍. 什么人 ...
最新文章
- JavaScript_上
- 算法之最近最少使用LRU
- linux 串口 qt,Linux-QT4.7 实现串口通信
- 配置阿里云docker加速与云镜像配置
- 《剑指Offer》题目:合并两个排序的链表
- 基于表格存储的高性能监控数据存储计算方案
- 小样本学习与Triplet Loss,数据增强和课程学习
- 【手把手】制作一个简单的HTML网页
- MaxScript脚本
- linux内核的学习方法
- 想自学编程?这么多编程自学网站,总有一个适合你吧!
- KVM#TyporaKVM虚拟机笔记
- python 正负数判断_python判断正负数方式
- python学习——关于曲线拟合
- 荣耀8_解锁_刷入第三方Recovery_root_刷入面具_刷机教程
- Nyquist-Shannon采样定理的理解
- 纯web端实现条形码识别
- Python编程:从入门到实践第六章读书笔记6.3遍历字典
- java消息总线ibus_SpringCloud Bus 消息总线
- 24点游戏python版
热门文章
- ios看html文件乱码,iOS webView 打开 TXT/PDF 文件乱码的问题
- 动作游戏的打击感和音效的关系
- 深度解析volatile关键字,就是这么简单
- Clion笔记- 菜单栏不见了...
- 计算机6005是开机时间,怎么查电脑的开机,和关机时间·,同学们
- 虽然没有见过凌晨四点的洛杉矶,但是我们见证了了凌晨灯火通明科技园:程序员的痛谁懂
- Unsupported OS Version In Xcode
- 凌晨3点不回家:成年人的世界不是他们说的那样
- 让你重新爱上 Windows 的小众软件
- 新东方报名系统服务器地址,新东方邮箱服务器地址