移动端页面开发

移动端页面开发需要掌握的……

• 移动端开发指的是：需要适配移动设备的网页开发
• 移动开发与pc端开发没有本质的区别，使用的也还是HTML/CSS/JS的技术

一、移动端与pc端开发的区别在于：

1.浏览器不同
手机浏览器是webkit的天下，就目前来说，我们只需要考虑webkit内核的浏览器和chrome，uc，qq，小米手机浏览器就好了。。

pc，我们需要考虑什么呢？
ie，firefox，safari，chrome……各种浏览器内核是不是兼容
2.布局
pc端页面的比例相对固定一点，移动端需要做到页面布局自适应
3.兼容性
pc端在开发过程中考虑的是浏览器兼容性，移动端开发中考虑的是手机兼容性问题，做移动端开发，更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化

二、移动端开发的思考？

1. 什么是屏幕尺寸，屏幕分辨率，屏幕像素密度?
2. 物理像素，css像素

屏幕尺寸：
指屏幕的对角线的长度，单位是英寸
1英寸=2.54厘米
常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

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

屏幕像素密度/像素密度/屏幕密度：
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关

物理像素：
设备像素/物理像素：（分辨率）出场就设定好的，厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。
买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点， 一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度. 设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
每个像素可以根据操作系统设置自己的颜色和亮度。
任何设备的物理像素的数量都是固定的 。

CSS像素：
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
它是为web开发者创造的，在css或者javascript中使用的一个抽象的层
一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。
在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。

对于web开发者而言：
我们使用的每一个css和javascript定义的像素本质上代表的都是css像素，我们在开发过程中
并不在意一个css像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。

像素是相对长度单位，在屏幕分辨率越高的设备，像素点越小，屏幕分辨率越低，像素点越大。
总结
web前端领域，像素分为设备像素和CSS像素
一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。

三、视口：

浏览器显示页面的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

布局视口(layout viewport)
这个视口的分辨率一般设置为980px，所以PC端页面大多都能在手机上显示，不过看上去很小，一般可以手工缩放网页

视觉视口(visual viewport)
指的是用户正在看到的网站区域。用户可以缩放去操作视觉视口，但不会影响到布局视口。

如图所示。
布局视口是我们文档的大小（document）。用document.documentElement.clientWidth获取它的宽度。

视觉视口是当前可视区域的大小（window）。用window.innerWidth来获取它的宽度。

图中，布局视口比视觉视口要大，所以我们开发了如图布局视口大小的文档，在显示时，会出现横向的滚动条。

所以，在移动端，当然不想要横向纵向的滚动条了。所以，如何想办法使布局视口和视觉视口等大呢？

理想视口(ideal viewport)
对设备来说，最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作，主要目的是设备有多宽，布局视口就有多宽

meta视口标签

//width 设置视口的宽度
//width=device-width   设置视口宽度为设备的宽度（常用）。
 
//initial-scale 设置初始缩放比例,页面加载时默认比例1.0

//initial-scale=1.0  表示不缩放
 
//user-scalable 设置是否允许用户缩放,yes/no(1/0)
//user-scalable=no  不允许用户缩放
 
//maximum-scale  设置允许的最大缩放比例
//maximum-scale=1.0  可以不设置，因为都禁止用户缩放了。
 
//minimum-scale 设置允许最小缩放比
//minimum-scale=1.0  不设置，因为都禁用用户缩放了。
 

//标准写法：
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

公式：

视觉视口宽度 = 理想视口宽度 / 缩放系数
缩放系数 = 理想视口宽度 / 视觉视口宽度

四、移动端的技术选型：

1.单独制作移动端页面(主流)
流式布局(百分比布局)
flex弹性布局(推荐使用)
less+rem+媒体查询布局
混合布局(上边三种混合)
2.响应式页面兼容移动端(其次)
媒体查询
bootstrap

1.流式布局(百分比布局)

流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定的像素限制，内容向两侧填充
max-width最大宽度（max-height最大高度）
min-width最小宽度（min-height最小高度）

body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-style: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 45px;
    height: 1000px;
}

2.Flex布局

flex是flexible Box的缩写，意味弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当为父盒子设置flex布局后，子元素的float、clear、和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，成为flex容器，简称容器。它的子元素自动成为容器成员，成为flex项目，简称项目

flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性
flex-direction: 设置主轴方向
justify-content：设置主轴是的子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上的子元素排列方式（多行）
align-items:设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction:属性值 说明
row 默认值。灵活的项目将水平显示，正如一个行一样
row-reverse 与 row 相同，但是以相反的顺序
column 灵活的项目将垂直显示，正如一个列一样。
column-reverse 与 column 相同，但是以相反的顺序。

justify-content：属性值 说明
flex-start 默认值从头开始。
flex-end 结尾开始排列。
center 主轴中心对齐
space-between 先贴在两边，在平分剩余空间
space-around 平分剩余空间

flex-wrap: 属性值 说明
nowrap 默认值。不换行
wrap 换行

align-items: 属性值 说明
flex-start 默认值 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸

align-content：属性值 说明
stretch 设置子元素高度平分父元素高度
center 在侧轴中间显示
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
space-between 子项在侧轴先分部在两头，在平分剩余空间
space-around 子项在侧轴平分剩余空间

align-self 控制子项自己在侧轴上的排列方式，可覆盖align-item属性。默认值为auto，表示继承父元素的align-item属性

3.rem+媒体查询

rem是一个相对单位，类似于em，em是父元素字体大小，而rem是相对于html元素的字体大小。比如HTML的字体设置为12px，那么2rem就代表了24px。

媒体查询
它是CSS3的新语法
使用@media查询，可以针对不同的媒体类型设置不同的样式，当重置页面的大小时，页面会根据浏览器的宽度和高度重新渲染页面。

@media mediatype and|not|only (media feature) {
    css-code;
}

@media开头
mediatype媒体类型
关键字and not only
(media feature)媒体特性 必须有小括号包含

mediatype媒体类型
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕，平板电脑，智能手机等

关键字
and 可以把多个媒体的特性连接在一起
not 排除某个多媒体类型 可以省略
only 指定某个特定的媒体类型 可以省略

media feature媒体特性
width 定义页面设备中可见区域的宽度
min-width 定义输出页面的最小可见区域宽度
max-width定义输出设备中页面最大区域宽度

媒体查询+rem可以实现元素动态大小变化
rem是跟着HTML动的，有了rem元素可以设置不同大小尺寸
媒体查询可以根据不同宽度来修改样式
两者结合就可以在不同设备的宽度下，动态改变页面的变化

css的弊端
需要书写大量没有逻辑的代码，冗余度很高
不方便维护，不利于重复利用
没有很好的计算能力
所以需要采用新技术less

Less
less变量
变量是指没有固定的值，可以改变。所以css中的一些颜色和数值经常使用下边的方式来替换
@变量名：值；
变量命名规范
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

Less嵌套
css的写法:

#header .logo {
	width：300px；
}

less的写法:

#header {
 	.logo{
		width：300px；
	}
}

注意：
如果有伪类、交集选择器、伪元素选择器 内层的选择器前面需要加&

a{
    &:hover{
        
    }
}

a{
    &::hover{
        
    }
}

less运算
任何数字、颜色或者变量都可以参与运算

@width: 10px + 5;
div{
    border: @width solid red;
    width: (@width + 5) * 2;
}

4.响应式开发

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备
超小屏幕(手机) <768px
小屏设备(平板) >=768px~<992px
中等屏幕(桌面显示器) >=992px~<1200px
宽屏设备(大桌面显示器) >=1200px

响应式布局容器
响应式需要一个父集作为布局容器，来配合子集元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

尺寸的划分
超小屏幕(手机) <768px :设置宽度为100%
小屏设备(平板) >=768px~<992px :设置宽度为750px
中等屏幕(桌面显示器) >=992px~<1200px :设置宽度为970px
宽屏设备(大桌面显示器) >=1200px :设置宽度为1170px

Bootstrap使用(只考虑样式)
1、首先创建文件夹结构
2、创建html骨架结构
3、引入相关样式文件
4、书写内容

<head>
    <meta charset="UTF-8">
    <!--视口设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--要求当前页面使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
    <!--解决IE9以下浏览器的不兼容问题-->
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>

布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
.container 类用于固定宽度并支持响应式布局的容器。不同尺寸的划分见上文
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（它适合于单独做移动端开发）栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容可以放入这些创建好的布局中。

栅格系统分为了12列
行（row）必须放到 .container 布局容器里面
要实现列的划分，需要给列添加类前缀
xs-extra small ：超小
sm-small ：小
md-medium ：中等
lg-large ：大
每一列默认有左右15px的padding
可以同时为一列指定多个类名，以便划分不同份数。例如：class=“col-md-4 col-sm-6”

<div class="container">
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>

如果份数相加小于12会有空白
如果大于，多的那一列会在下一行显示

列嵌套

<div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-lg-6">22</div>
                    <div class="col-lg-6">33</div>
                </div>
            </div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
    </div>

列偏移
使用 .col-md-offset- 类可以将列向右偏移
原理是在右侧的盒子的左边加了一个margin值

<div class="container">
        <div class="row">
            <div class="col-md-3">zuo</div>
            <!-- 偏移的份数是12-3-3=6 -->
            <div class="col-md-3 col-md-offset-6">you</div>
        </div>
    </div>

列排序
通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。

<div class="container">
    <div class="row">
        <div class="row">
            <div class="col-md-9 col-md-push-3">右推</div>
            <div class="col-md-3 col-md-pull-9">左拉</div>
        </div>
    </div>
</div>

响应式工具
利用媒体查询，并使用这些工具类能方便的针对不同设备显示或隐藏
.hidden-xs 超小屏下隐藏
.hidden-sm 小屏下隐藏
.hidden-md 中屏下隐藏
.hidden-lg 大屏下隐藏
与之相反的是visible-xs等等，代表的是显示