移动Web开发介绍_移动web需要单独开发吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41070391/article/details/90736106

移动端开发

在移动端进行web页面的开发，开发出来的页面是运行在浏览器上的

移动端开发与PC端开发的区别

移动端浏览器大多基于webkit内核，属于高级浏览器，支持h5c3特性，不需要考虑兼容性问题

视口

什么是视口

浏览网页的窗口，视口的大小决定了当前设备是否能够将网页完整呈现。
PC端在浏览器最大化的情况下，视口的宽度就是电脑屏幕的宽度。
移动端，设备厂商为了能够将PC端网页完整的显示在移动设备中，强制将视口的宽度设置为了980px
- 但是移动端设备屏幕宽度远远小于这个数值
- 所以最终的表现结果就是网页完整显示，但是被等比缩小为设备屏幕的宽度

在移动端这种展现页面的方式对于用户体验来说是极差的。

如何约束视口宽度

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

要了解的知识点:

移动设备高清图

retina视网膜屏幕，即高清屏，能够使图片呈现的更加细腻。

这要求在做移动端开发时，需要提供更加清晰的图片。

window.devicePixelRatio 获取当前设备的屏幕像素密度比

Touch事件

touchstart：当手指触碰屏幕时候触发
touchmove：当手指在屏幕上滑动时连续触发
touchend：当手指离开屏幕时触发
touchcancel：系统停止跟踪触摸时候会触发 (这个事件不会经常使用,了解即可)
绑定事件的方法
- dom.addEventListener(‘touchstart’,function(e){});
- dom.addEventListener(‘touchmove’,function(e){});
- dom.addEventListener(‘touchend’,function(e){});
事件对象中包含移动端特有的属性
- touches 当前屏幕上所有触摸点的集合列表

过渡和动画结束事件

transitionEnd 过渡结束后触发
绑定事件的方法
- dom.addEventListener(‘webkitTransitionEnd’,function(e){});
- dom.addEventListener(‘transitionEnd’,function(e){});
animationEnd 动画结束后触发
绑定事件的方法
- dom.addEventListener(‘webkitAnimationEnd’,function(e){ });
- dom.addEventListener(‘animationEnd’,function(e){ });

移动端swiper插件

常用css初始化属性

取消点击链接或文本框高亮的默认效果 -webkit-tap-highlight-color:transparent;
去掉文本框或下拉框的默认样式 -webkit-appearance:none;
禁止用户选择页面中的文字 -webkit-user-select:none;
使局部滚动更加顺滑 -webkit-overflow-scrolling:touch;
更改placeholder文字颜色 input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{}
设置所有标签的盒模型为内减 box-sizing:border-box;

布局使用：

流式布局

即百分比布局，将width,padding,margin属性用百分比的形式表示

注意

在百分比的世界中，padding，margin四个方向都是相对于父级宽度计算

响应式web开发

移动互联网成熟,PC端网页在移动设备中用户体验不好
初期的解决方案是针对移动设备单独做一套网站
移动设备尺寸多种多样,不可能针对每一种设备尺寸单独做一套网站
越来越多的客户要求网站能够在移动设备中有一个良好的用户体验

什么是响应式开发?

检测屏幕宽度，针对不同的屏幕宽度为相同的HTML结构设置不同的样式，以呈现出符合当前屏幕宽度网站样式。

屏幕尺寸的划分

超小屏幕 768以下
小屏设备 768px ~ 992px
中等屏幕 992px ~ 1200px
宽屏设备 1200px ~ 1920px

响应式开发的原理

css3媒体查询(Media Query)
检测屏幕宽度，为不同的屏幕尺寸设置不同的样式

<!-- 第一种写法 -->
<style>
    @media screen and (max-width:768px){

    }
</style>

<!-- 第二种写法 -->
<link rel="stylesheet" href="" media="screen and (max-width:768px)">

当查询区间有重叠的时候,后面的样式优先
写媒体查询的时候尽量避免重复的查询区间

移动开发与响应式开发对比

移动Web开发+PC开发
- 应用场景
  - 一般在已经有PC端的网站，开发移动端的时候，只需单独开发移动端。
- 开发效率
  - 针对性强,开发效率高
- 适配范围
  - 只适配移动设备，pad上体验相对较差
- 执行效率
  - 代码简洁，加载快
响应式开发
- 应用场景
  - 新建的一些网站,要求适配移动端,所以就一套页面兼容各个终端,灵活
- 开发效率
  - 兼容各种终端,效率低
- 适配范围
  - 可以适配各种终端
- 执行效率
  - 代码相对复杂，加载慢
移动web开发和响应式开发都是现在主流的开发模式，使用的都是流式布局来适配不同的设备

BootStrap框架

中文官网
使用人数众多，足够稳定，不断更新迭代
代码简洁、直观、规范
让开发更简单,提高了开发的效率
扩展性较强,可以自定义默认样式

Bootstrap版本

3.x.x 目前使用最多
- 稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好。偏向用于开发响应式布局、移动设备优先的Web项目。

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

布局容器

通常用于制作页面版心。

<!-- 在不同的屏幕尺寸下布局容器的尺寸也是不同的 始终居中于屏幕 -->
<div class="container"></div>
<!-- 流式布局容器 容器宽度始终100% -->
<div class="container-fluid"></div>

<!-- 通过类名row创建行 -->
<div class="row">
    <!-- 通过col-md-数值 类名创建列 -->
	<div class="col-md-6">内容1</div>
	<div class="col-md-6">内容2</div>
</div>

Bootstrap将一行默认分为12列，可以通过类名中的数值来定义当前列占总列数的多少。
可以将类名中的md替换成lg、sm、xs
- lg 当屏幕宽度 ≥1200px 时生效
- md 当屏幕宽度 ≥992px 时生效
- sm 当屏幕宽度 ≥768px 时生效
- xs 当屏幕宽度 <768px 时生效
列偏移
- 使用 .col-md-offset-*类可以将列向右侧偏移，设置列与列之间的间距。

列嵌套

列中可以再次嵌套栅格系统，称为列嵌套，以支撑复杂的网页布局。

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6"></div>
        </div>
    </div>
    <div class="col-md-6"></div>
</div>

工具类

类名称	解释
text-left	文本左对齐
text-center	文本居中对齐
text-right	文本右对齐
center-block	让块级元素居中
pull-left	左浮动
pull-right	右浮动
clearfix	清除浮动
show	显示元素
hidden	隐藏元素
hidden-xs	在超小屏幕中隐藏
hidden-sm	在小屏幕中隐藏
hidden-md	在中等屏幕中隐藏
hidden-lg	在大屏幕中隐藏