移动端开发

简介

什么是移动端

移动端主要是指手机端，也包含部分的平板电脑等客户联网终端设备。
例如     1.平板       2.手机

前端开发种类

1.PC端
2.移动端

为什么要学习移动端

越来越多的人使用移动端（流量）

PC端能直接在手机使用嘛

能
a:响应式
b:重新敲一份

基本概念

屏幕尺寸

指的是屏幕对角线的长度，单位为英寸。

屏幕尺寸=屏幕斜边的像素/PPI

分辨率

	是指纵横向上的像素点数，单位是px。

设备像素

又称 物理像素
	特点：
            a.越来越清晰
            b.一个移动端的设备像素是固定不变的

设备独立像素（css像素）

设备能放多少px	

设备像素比（DPR）

DPR = 设备像素/设备独立像素

像素密度（PPI）

单位面积上（英寸）像素（设备像素）的数量。它是一个定值，是一个固定的参数。

PPI=屏幕斜边的像素/屏幕尺寸

视口

视图分类

layout viewport 布局视口
visual viewport 可视视口

content ="width = device - width"
将布局视口的宽度设为可视视口的宽度，这样就保证了不同手机屏幕看到的效果都很舒服

缩放比例

initial-scale=1.0

缩放比(initial-scale)=css像素(设备css像素)/viewport宽度(html宽度)

• width: device-width（设备的实际宽度–即设备的 css 像素）。
• user-scalable: 是否允许用户在设置或者默认的视口宽度上进行页面缩放，值为no或yes，代表不允许与允许。
• initial-scale: 页面初始缩放值，值为一个数字（可以带小数）。大于 1 表示放大。
• minimum-scale: 页面最小能够缩放的比例，值为一个数字（可以带小数）。
• maximum-scale: 页面最大能够缩放的比例，值为一个数字（可以带小数）。

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

获取视图宽度

    a.document.documentElement.clientWidth
    b.window.innerWidth

    兼容性处理：
    window.innerWidth || document.documentElement.clientWidth