移动端开发概念
移动端开发
区别于传统的页面开发，移动端开发是指利用移动设备的特性以及css3提供的各种相对单位来实现移动端页面布局开发。移动设备是指便携的移动电子设备。包括手机、平板、小屏幕电脑等。
为什么不直接使用响应式布局
布局不匹配：pc端一般屏幕较大，可以显示更多的东西，而移动设备屏幕空间有限，只能显示部分内容。代码量太大：针对pc、移动端会写不同版本的css。
屏幕的基本概念
屏幕的尺寸-英寸
英寸是一个长度单位，1英寸约等于2.54厘米。手机中的英寸是指手机屏幕对角线的长度为多少英寸。比如iphone6的屏幕尺寸是4.7英寸，指iphone6的屏幕对角线尺寸为4.7* 2.54厘米。
屏幕尺寸大全：https://uiiiuiii.com/screen/
像素
是指屏幕上最小的一个方块，每个方块可以存放一种颜色。无数个像素的结合就可以形成图像。平时所说的分辨率就是指屏幕上有多少个小方块（像素）。
设备物理像素（手机分辨率）
比如说iphone6的物理分辨率是750 * 1334，指的是iphone6屏幕水平方向上有750个发光点，每个发光点可以作为一个像素。垂直上有1334个发光点（小方块）。设备物理像素是固定的，只有这么多像素。
设备独立像素（在pc上又称逻辑像素）-dp
指为了保证无论手机物理分辨率有多大，为了保证页面的效果得到统一展示，那么每个手机都有直接的设备独立像素。无论哪个手机每一个独立像素都可以认为是一个css像素。每个手机的设备独立像素多少是不一样的。比如iphone6、7、8独立像素都是375 * 667，iphone 12pro 就是390 * 844.
绝大多数手机的独立宽度为：360 375 390 411 414
设备独立像素就是移动端页面所参考的100%宽度
dpi
设备独立像素比:指手机的独立像素和物理分辨率的比值。每个手机的dpi是固定的。比如iphone12 pro max的独立像素是428 * 926，手机物理分辨率是1284 * 2778，dpi就是3.0视口（viewport）
布局视口
因为手机一般的屏幕较小，分辨率不同。为了正常显示所有的页面，包括pc端，所以移动端针对浏览器页面有个默认的页面宽度。大多数的手机浏览器页面默认宽度为980px，有的是1024px。我们称默认的移动端浏览器页面显示模式为布局视口(layout viewport)视觉视口（visual viewport）
布局视口是为了正常显示pc端页面而做的调整，但对于屏幕本身是无法以屏幕本身宽度来作为页面布局。而视觉视口是指以当前屏幕的宽度作为页面的布局方式。不同的dpi会导致相同px的页面在不同的手机下会有空隙或者滚动条等。
理想视口
无论是什么品牌手机，或哪种分辨率，应当同样宽度的页面在不同的手机上都会呈现一样的效果。我们称为理想视口。每个手机的理想视口是以自己的设备独立像素作为自己页面的100%宽度。1csspx在每个手机上的效果是一样的。
开启理想视口模式
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
处于理想视口模式下。同样的页面内容，在不同的手机上效果是一致的，唯一需要兼容处理的就是每个手机的设备独立像素不一样。
绝大多数手机的独立宽度为：360 375 390 411 414 768 1024
meta是在head中用于完成页面配置的标签。可以配置不同的设置，比如字符编码，设置移动端视口模式等。
name：表示要设置的配置项名称。比如name=viewport表示设置移动端视口模式，name=keywords表示设置页面关键字。
content：设置项的具体配置信息。
width=device-width：即页面宽度采取设备的独立像素，即width:100%==设备的独立像素
initial-scale=1.0：缩放比例为1.0，缩放比例也是参考了设备独立像素
user-scalable：是否允许用户缩放页面，取值为yes或no
移动端使用的像素单位
em rem
em：1em相当于父标签的font-size大小。比如父标签的font-size为14px，那么1em等于14px，2em=28px父标签没有font-size，继续往上找font-size。如果祖先标签都没有设置font-size，会参考浏览器的font-size，大多数默认16px
rem：rem是指相对于html标签的font-size，不会被父标签的font-size所影响。即如果html的font-size为30px，那么页面上的所有后代标签设置1rem==30px
vw vh(viewport-width\height)
vw：css3提供的单位，1vw即视口宽度的1%。100vw即100%视口宽度。vh：css3提供的单位，1vh即视口高度的1%，100vh即100%视口高度。
在理想视口下，视口宽度或高度就是浏览器的宽度以及可视区域的高度。
px:绝对单位
为了保证页面的效果在不同手机下效果是一样的话，需要使用理想视口。移动端布局技巧
移动端布局纲要
通过设置html不同的font-size以及rem来进行屏幕布局以及适配方案，对于一些特殊的位置，可以配合vw、vh来实现。页面布局（针对移动端）
必须采用理想视口建议页面整体尺寸采取rem
对于列表之类可以使用弹性布局（推荐）
文字也是用rem来设置
屏幕适配
主要适配以下的设备独立性像素理想的视口宽度）360 375 390 411 414 768 1024
适配方案：根据不同屏幕宽度来设置html不同的font-size
使用媒体查询
利用js来动态监测屏幕宽度，来计算得到合适的font-size
关于图像
小图标尽量用字体图标背景图片可以background-size用rem
一般img标签是设置100%，父标签来控制宽度
