移动Web(一)

移动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,他们只能在各自的操作系统上运行。

优点:

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

缺点:

  1. 开发成本高
  2. 需要安装和更新,更新与发布需要审核。

Web App

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

优点:

  1. 支持设备广泛
  2. 开发成本低(使用)
  3. 可以随时上线与更新,无需审核

缺点:

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

混合app(Hybrid App)

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

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

优点:

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

缺点:

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

总结:

三种开发各有优缺点,具体用什么需要根据实际情况而定,比如预算,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倍图】

移动端调试问题

  1. 模拟器调试
  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文件,进行编译。

缺点:

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

使用考拉

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

考拉官网

使用步骤:

  1. less文件夹拖进去
  2. 会在当前目录生成一个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(一)

上一篇:学习ASP.NET Core(11)-解决跨域问题与程序部署


下一篇:智慧城市PPP发展路上惑与解 节能环保行业获益几何?