web移动开发总结(一)_简述移动web开发的特点-程序员宅基地

技术标签: web移动开发总结  八.web移动开发  

总结今天学习的内容:

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

web前端

  1. PC端的web : 在PC端电脑访问的web(网页网站) 页面一般固定宽度的 居中在网页显示 还有各种浏览器需要兼容
  2. 移动端的web: 在手机端访问的web 页面一般是全屏的 全屏在手机里面显示 在手机端的浏览器内核都是统一webkit 很少考虑浏览器兼容性问题

移动web的概念和发展历史

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

  2. 移动端的浏览器:

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

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

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

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

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

移动web的开发方式

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

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

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

    4. 媒体查询条件的判断顺序

      1. 如果使用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>

响应式的开发框架

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

  2. 常见的响应式开发框架

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

了解bootstrap框架

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

学习bootstrap

  1. 打开官网 https://v3.bootcss.com/

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

  3. 引入bootstrap

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

    1. 如果依赖的先引入依赖的包在引入不依赖的包
    2. 有第三方的包先引入第三方的包 再引入自己包
    3. CSS 文件 通常引入在head中
    4. JS 文件 通常引入在body的结束标签的上面(好处就是为了让页面迅速加载出来)
      除了一些对页面渲染有帮助的JS必须放在前面

bootstrap文档(下面是要熟悉的文档,很重要,具体用法在这个网站:https://v3.bootcss.com/css/)

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

总结

  1. 移动web: 移动端(手机端)打开网页网站

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

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

  4. 移动端浏览器: 都是webkit内核 兼容性少

  5. 移动web的开发方式

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

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

    1. bootstrap (重点掌握 所有UI框架基础)
    2. 妹子UI
    3. layUI
    4. MUI
    5. framework7
  8. 使用bootstrap

    1. 下载包
    2. 引包
      1. 引入bootstrap.css
      1. 引入jquery.js (bootstrap JS插件 基于jquery)
      1. 引入bootstrap.js
    3. 使用文档里面的代码就有对应的效果
  9. bootstrap文档

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

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

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

  13. 搭建微金所项目

    1. 创建项目文件夹 把css fonts img lib复制到项目文件夹(来源完整版) lib 就是第三方的包
    2. 创建主页 引包
    3. 写结构 把页面分区域 头部 导航 轮播图 特色 预约 商品 新闻 合作伙伴
    4. 推荐容器使用id 方便覆盖样式 和 方便JS获取元素
    5. 使用bootstrap构建页面的内容
      1. 头部: 全局样式里面的: 容器 栅格系统 组件:字体图标
      2. 导航: 组件:导航条
      3. 轮播图: JS插件:carousel轮播图插件
      4. 特色介绍: 全局样式: 容器 栅格系统 组件: 字体图标 媒体对象
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaodi520520/article/details/84728446

智能推荐

【Python】随机函数_随机函数19-23-程序员宅基地

文章浏览阅读423次。import random1、random.random()返回随机生成的一个实数,它在[0,1)范围内2、random.uniform(a,b)用于生成一个指定范围内的随机浮点数,两格参数中,其中一个是上限,一个是下限。如果a>b,则生成的随机数n,即b<=n<=a;如果a>b,则a<=n<=b。3、random.randint(a..._随机函数19-23

2020年度软件和信息技术服务竞争力前百家企业名单出炉 —— 旋极信息再次荣登榜单_旋极信息主业竞争力-程序员宅基地

文章浏览阅读295次。2020年11月12日上午,第二十四届中国国际软件博览会在杭州高新区(滨江)开幕。本届软博会以“软件铸魂 数智转型”为主题,充分展现了软件产业发展新特点、新模式、新业态。软博会期间,重磅环节举行了2020年度软件和信息技术服务竞争力前百家企业发布会。中国电子信息行业联合会副会长兼秘书长周子学出席会议并致辞,联合会副秘书长李杰发布了2020年度软件和信息技术服务竞争力前百家企业名单。北京旋极信息技术股份有限公司(以下简称“旋极信息”)凭借多年来在技术领域的积累及创新探索,脱颖而出,连续两年榜上有名。本届前_旋极信息主业竞争力

stm32.串口.寄存器。中断_stm32寄存器串口中断-程序员宅基地

文章浏览阅读1.4k次。串口(中断设置)1.中断1.中断优先级分组中断优先级分组BIN抢占优先级响应优先级01110 位4 位11101位3位21012位2位31003 位1位40114位0 位数字越小级别越高 SCB->AIRCR |=1<<8;//[10:8] SCB->AIRCR |=1<..._stm32寄存器串口中断

分布式事务 Seata Saga 模式首秀以及三种模式详解 | Meetup#3 回顾_saga 分布式事务 seata-程序员宅基地

文章浏览阅读1.4k次,点赞3次,收藏9次。作者:屹远(陈龙),蚂蚁金服分布式事务核心研发 。 本文根据 8月11日 SOFA Meetup#3 广州站 《分布式事务 Seata 及其三种模式详解》主题分享整理,着重分享分布式事务产生的背景、理论基础,以及 Seata 分布式事务的原理以及三种模式(AT、TCC、Saga)的分布式事务实现。本次分享的视频回顾以及 PPT 查看地址:tech.antfin.com/community/a…一、分布式事务产生的背景1.1 分布式架构演进之 - 数据库的水平拆分蚂蚁金服的业务数据库起初是单库_saga 分布式事务 seata

text-overflow_txt-oflow-程序员宅基地

文章浏览阅读423次。语法: text-overflow : clip | ellipsis 参数: clip :  不显示省略标记(…),而是简单的裁切(clip这个参数是不常用的!) ellipsis :  当对象内文本溢出时显示省略标记(…)说明: 设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。 注意,text-overflow:ellipsis 属性在FF中是没有效果的。我们可以用它代替我_txt-oflow

Spring Security OAuth2.0_实现分布式认证授权_集成测试_Spring Security OAuth2.0认证授权---springcloud工作笔记155_spring security oauth2.0实现分布式系统授权(nacos注册中心+网关+认证授-程序员宅基地

文章浏览阅读302次。技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】:170933152然后前面我们已经把分布式微服务的,认证授权全部集成了,然后我们来测试.启动资源微服务order微服务.启动网关微服务然后启动注册中心微服务然后注意我们,这里以后访问就可以统一通过网关来访问了,我们网关的端口是53010 对吧,我们先去请求一个令牌可以看到.我们通过密码模式.获取了这个令牌以后,我们去check检查一下这个token,可以看到把token._spring security oauth2.0实现分布式系统授权(nacos注册中心+网关+认证授权服务(j

随便推点

springboot毕设项目游戏交易平台8i37q(java+VUE+Mybatis+Maven+Mysql)_springboot游戏论坛-程序员宅基地

文章浏览阅读117次。Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。Springboot + mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等。springboot毕设项目游戏交易平台8i37q(java+VUE+Mybatis+Maven+Mysql)2. 使用IDEA/Eclipse/MyEclipse导入项目,修改配置,运行项目;_springboot游戏论坛

EventHandler 泛型委托_事件处理器接口 eventhandler<textends event> 中泛型的表示是泛型的什么-程序员宅基地

文章浏览阅读453次。EventHandler 泛型委托EventHandler 泛型委托// This example demonstrates the EventHandler<T> delegate.using System;using System.Collections.Generic;//---------------------------------------------------------public class MyEventArgs : EventArgs{ _事件处理器接口 eventhandler 中泛型的表示是泛型的什么

linux之软件管理_安装libgnomeui-devel-程序员宅基地

文章浏览阅读302次。软件管理: 软件包: rpm/deb centos: rpm -ivh yum rpm仓库管理软件 ubuntu: dpkg -i apt deb仓_安装libgnomeui-devel

空字符串计数、让字典可排序...Python冷知识(五)-程序员宅基地

文章浏览阅读761次,点赞2次,收藏4次。本文转载自Python编程时光(ID: Python-Time)冷知识系列,直至今日,已经更新至第五篇。前四篇给你准备好了,还没阅读的可以学习一下。谈谈 Python 那..._空字符串字典序

upload-labs安装及攻略_uploadlabs-程序员宅基地

文章浏览阅读2.4w次,点赞32次,收藏200次。upload-labs靶场的安装搭建(windows)(1)首先当然是需要phpstudy的环境,所以要先下载安装phpstudy。(2)然后到github的网址中下载源码的压缩包。github网址:https://github.com/Tj1ngwe1/upload-labs(3)下载后解压缩到phpstudy目录下的WWW子文件夹中,这里要注意吧压缩包的名字改成upload-labs,不然靶场的页面会显示得不对。(4)然后在输入url HTTPS:..._uploadlabs

论文浅尝 - EMNLP2020 | 通过词重排序跨语言解析-程序员宅基地

文章浏览阅读280次。笔记整理 | 吴林娟,天津大学硕士来源:EMNLP2020链接:https://www.aclweb.org/anthology/2020.findings-emnlp.265.pdf动..._吴林娟 天津大学