移动Web(一)

2022-06-25 12:30:13

移动web基础

移动端开发现状

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fyWnoeng-1584532810456)(image/phone.jpg)]

移动web开发指的是需要适配移动设备的网页开发
移动web开发与pc端web开发没有本质的区别，使用的还是HTML/CSS/JavaScript的技术
移动web开发与pc端web开发的区别是什么？

?

移动端的浏览器与pc端不同

谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 欧朋浏览器 百度手机浏览器  360安全浏览器  搜狗浏览器  猎豹浏览器等
国内的手机浏览器都是根据webkit内核修改过来的，国内没有自主研发的内核，国内的操作系统也是基于Android系统修改的。

因此在移动端，css3属性只需要加webkit前缀即可。

移动端设备尺寸不一样(尺寸非常多，碎片化很严重)

Android： 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
iphpne：  640*960 640*1136 750*1334 1242*2208

移动端开发分类

原生app（native app）
混合app（Hybrid app）
web应用（webApp）

原生app（native app）

原生app是基于操作系统的开发，比如安卓，ios，windows phone,他们只能在各自的操作系统上运行。

优点：

可以访问操作系统，获取更多的资源（gps，摄像头，传感器，麦克风等）
速度快，性能高，用户体验好
可以离线使用

缺点：

开发成本高
需要安装和更新，更新与发布需要审核。

Web App

Web应用使用H5C3开发页面，为浏览器设计的基于web的应用，可以在各种智能设备的手机浏览器上运行。不需要安装即可运行。

优点：

支持设备广泛
开发成本低（使用）
可以随时上线与更新，无需审核

缺点：

用户体验极度依赖网速
要求联网

混合app（Hybrid App）

Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App。（淘宝、京东、手机百度）

Hybird App说白了就是使用了Native app的壳，里面其实还是HTML5页面。

优点：

开发成本和难度更低，兼容多个平台
也可以访问手机的操作系统资源。
更新维护更方便

缺点：

用户体验相比原生app稍差。
性能依赖于网速

总结：

三种开发各有优缺点，具体用什么需要根据实际情况而定，比如预算，app注重功能还是内容等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVPqmECz-1584532810457)(image/移动开发分类.png)]

视口viewport（重要）

问题：一个电脑上的网站，在手机端访问，效果是什么样的？


1. 在手机端，html的大小都是980px，为什么？
这主要是历史原因导致的，因为在移动设备刚流行的时候，网站大多都是pc端的，pc端的页面宽度一般都比较大，
移动设备的宽度比较小，如果pc端页面直接在移动端显示的话，页面就会错乱。
为了解决这个问题，移动端html的大小直接就定死成了980px（因为早起的pc端网站版心就是980px居多）。


2. 视口
在pc端，html的大小默认是继承了浏览器的宽度，即浏览器多宽，html的大小就是多宽，
但是在移动端，多出来了一个视口的概念（乔布斯）,视口说白了就是介于浏览器与html之间的一个东西，
视口的宽度默认定死了980px，因此html的宽度默认就是980px，视口的特点是能够根据设备的宽度进行缩放。

将视口宽度和手机屏幕一样宽，网页基于视口进行布局，网页的布局宽度就和手机屏幕一致了

什么是视口：移动端一个虚拟布局
有什么用：移动端基于视口进行布局
怎么用：<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

3. 视口设置。
对于现在的移动端页面来说，视口默认为980px肯定不合适，因为设备宽度不够的话，视口会进行缩放，导致页面展示效果不好看。

视口参数设置

//width 设置视口的宽度
//width=device-width   设置视口宽度为设备的宽度（常用）。

//initial-scale 设置初始缩放比例
//initial-scale=1.0  表示不缩放

//user-scalable 设置是否允许用户缩放
//user-scalable=no  不允许用户缩放

//maximum-scale  设置允许的最大缩放比例
//maximum-scale=1.0  可以不设置，因为都禁止用户缩放了。

//minimum-scale 设置允许最小缩放比
//minimum-scale=1.0  不设置，因为都禁用用户缩放了。


//标准写法：
//快捷键：  meta:vp + tab键
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

屏幕与分辨率

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。

屏幕尺寸

通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示

1英寸 = 2.54厘米

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEY7Aox8-1584532810458)(image/屏幕尺寸.png)]

屏幕分辨率

分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示,相同尺寸下分辨率越高，越清晰。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1koFIQF-1584532810459)(image/屏幕分辨率.jpg)]

像素：指计算机显示设备中的最小单位，即一个像素点的大小。

像素是相对长度单位，在屏幕分辨率越高的设备，像素点越小，屏幕分辨率越低，像素点越大。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e4msgFQo-1584532810459)(image/ppi对比.png)]

像素密度ppi(了解)

PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数

利用 勾股定理 我们可以计算得出PPI

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XKRVoWlQ-1584532810460)(image/像素密度.jpg)]

PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展现画面的品质也就越精细，反之就越粗糙。

结论：当PPI 越大，展示的画质越精细。

物理像素和 css像素

物理像素

设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。

css像素

逻辑像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

像素比

物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

获取设备的像素比

window.devicePixelRatio  //物理像素与CSS像素的比值

2倍图与3倍图（重要）

以后同学在工作的过程中，从UI那拿到的设计图通常都是640的设计图或者是750的设计图.

把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJmjDImI-1584532810463)(image/2x.png)]

设备像素比devicePixelRatio：即像素的压缩比例

结论：在移动端为了在高清屏手机上显示得更加细腻，通常会使用更大的图片，比如2倍图或者3倍图。

【演示：2倍图】

移动端调试问题

模拟器调试
真机调试：使用手机进行访问。

手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。

流式布局

移动端的特点

手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新
手机端屏幕比较小，能够放的内容比较少。

问题：布局的时候怎么解决屏幕大小不一致的问题？

PC端，固定版心，让所有分辨率的电脑的版心都是一样的，比如京东
移动端：移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心不合适。因此移动端大多会采用流式布局（百分比布局）

流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。

流式布局的特征：

宽度自适应，高度写死，并不是百分百还原设计图
图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。
一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化

流式布局无法做到所有设备都非常逼真的还原设计图，有些设备显示效果不是特别的好看。但是流式布局是移动端非常常用的一种布局方式，比较简单，需要掌握（携程、京东)

经典的流式布局

//1. 左侧固定，右侧自适应
//2. 右侧固定，左侧自适应
//3. 两侧固定，中间自适应（圣杯布局，双飞翼布局）
//4. 等分布局

less

Less简介

CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS/sass 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

(less css预处理器)

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

less仅仅是写css的另一种方式，写出来的less文件浏览器也不识别，所以啊，我们写完了less文件，还需要通过less解析器解析成css，最终浏览器引入的还是css文件。

学习网站：

中文网: http://lesscss.cn/

less的编译

如何把less文件变成css文件

引入less.js文件（了解）

<!-- 必须指定rel的类型是stylesheet/less --> 
<link rel="stylesheet/less" href="less/01.less">
<script src="less.js"></script>

注意：这种方式必须在http协议下运行，因为本质上less.js是通过ajax请求了less文件，进行编译。

缺点：

需要多引入一个less.js文件
需要多一次http请求，file协议打开无效
如果浏览器禁用了js，那么无法生效
无法实时的看到编译的结果。

使用考拉

koala是一个前端预处理器语言（less/sass）图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

考拉官网

使用步骤：

把less文件夹拖进去
会在当前目录生成一个css目录

优点：不用node环境，不用less环境，koala内置了。

Less语法

less初体验

新建一个less文件，输入以下代码:

@color:red;
p {
  color:@color;
}

可以看到，webstorm自动的帮我们生成了对应的css文件。

变量

注释

/*这个注释是CSS中的注释，因此会编译到css中*/
//这个注释,CSS中用不了，因此不会编译出来。

变量

@charset "UTF-8";
@wjs_color:#e92322;
body {
  background-color: @wjs_color;
}

div {
  width: 400px;
  height: 400px;
  border: 1px solid @wjs_color;
}

mixin混入

混入样式类

@charset "UTF-8";
//混入
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}

.btn_border {
  border: 1px solid #ccc;
}

.btn_danger {
  background-color: red;
}

.btn_block {
  display: block;
  width: 100%;
}

//混入其他类的样式。
.my_btn {
  .btn;
  .btn_block;
  .btn_border;
  .btn_danger;
}

编译后的css

@charset "UTF-8";
.btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
}
.btn_border {
  border: 1px solid #ccc;
}
.btn_danger {
  background-color: red;
}
.btn_block {
  display: block;
  width: 100%;
}
.my_btn {
  width: 200px;
  height: 50px;
  background-color: #fff;
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  background-color: red;
}

缺点：写了很多类，但是都编译到css文件中了，其实我们需要的仅仅是.my_btn这一个类。

混入函数

不带参数的函数

@charset "UTF-8";

//不会被编译
.btn() {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.my_btn {
  .btn();
}

带参数的函数

.btn_border(@width) {
  border: @width solid #000;
}
.my_btn {
  //如果函数定义了参数，调用的时候必须传入参数，否则会报错
  .btn_border();
  //传入参数，就不会报错
  .btn_border(10px);
}

带默认值的函数

.btn_border(@width:1px) {
  border: @width solid #000;
}
.my_btn {
  //因为有默认值，所以不会报错
  .btn_border();
  //传入参数，会覆盖1px，也不会报错
  .btn_border(10px);
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

使用伪类的时候可以使用& 表示自己

.nav {
  border: 1px solid #000;
  overflow: hidden;
  ul{
    position: relative;
    width: 1000px;
    li{
      float: left;
      width: 20%;
      a{
        display: block;
        text-align: center;
        text-decoration: none;
        &:hover{
          color: red;
        };
        img {
          display: block;
          width: 100%;
        }
      }
    }
    }
  }





.nav {
  border: 1px solid #000;
  overflow: hidden;
}
.nav ul {
  position: relative;
  width: 1000px;
}
.nav ul li {
  float: left;
  width: 20%;
}
.nav ul li a {
  display: block;
  text-align: center;
  text-decoration: none;
}
.nav ul li a:hover {
  color: red;
}
.nav ul li a img {
  display: block;
  width: 100%;
}

导入

@charset "UTF-8";

@import "01-variable";

@import "02-maxin";

@import "03-mixin02";

@import "04-book";

模块化的思想，分模块进行管理这些less文件，最终只需要使用import将less引入到一起即可。

函数（运算）

在我们的 CSS 中充斥着大量的数值型的 value，less可以直接支持运算，也提供了一系列的函数提供给我们使用。

http://www.1024i.comhtml/demo/less/reference.

JDM

项目结构搭建

样式初始化

@charset "utf-8";

/* css reset 样式重置*/
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  margin: 0;
  padding: 0;
  /*所有盒子布局采用内减模式*/
  -webkit-box-sizing: border-box;
  /* 兼容-webkit-内核浏览器 */
  box-sizing: border-box;
  /*去除移动端点击高亮颜色*/
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 14px;
  color: #333;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  /*后面的都是 备胎*/
}
ol,
ul {
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
  color: #333;
}
input {
  border: none;
  outline: none;
  /* 在 移动端浏览器 表单可能会出现 阴影 高亮 3d效果,需要清除*/
  -webkit-appearance: none;
}

/* 废物利用 */
em, i {
  font-style: normal;
}


/*commom css 公共样式*/
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  line-height: 0;
  visibility: hidden;
  height: 0;
}

码农公寓

移动Web(一)

移动web基础

移动端开发现状

移动端开发分类

视口viewport（重要）

屏幕与分辨率

屏幕尺寸

屏幕分辨率

像素密度ppi(了解)

物理像素和 css像素

2倍图与3倍图（重要）

移动端调试问题

流式布局

less

Less简介

less的编译

引入less.js文件（了解）

使用考拉

Less语法

less初体验

变量

mixin混入

嵌套

导入

函数（运算）

JDM

项目结构搭建

样式初始化

京东头部

京东轮播图

京东导航

京东快报

京东秒杀

京东主会场

码农公寓

移动web基础

移动端开发现状

移动端开发分类

视口viewport（重要）

屏幕与分辨率

屏幕尺寸

屏幕分辨率

像素密度ppi(了解)

物理像素 和 css像素

2倍图与3倍图（重要）

移动端调试问题

流式布局

less

Less简介

less的编译

引入less.js文件（了解）

使用考拉

Less语法

less初体验

变量

mixin混入

嵌套

导入

函数（运算）

JDM

项目结构搭建

样式初始化

京东头部

京东轮播图

京东导航

京东快报

京东秒杀

京东主会场

相关文章

物理像素和 css像素