移动端常见的问题

1移动端布局的难点

移动端的尺寸和分辨率太他娘的多了,还有丰富的交互也是移动端难点

视口概念: 在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口（window）、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域，坐标单位是与设备相关的。窗口的坐标是逻辑坐标，与设备无关。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

逼逼这么多简单的理解就是:看得见的设备窗口

是不是感觉很无语  ,下面该化重点了要考的

让布局视口和可视视口一致,布局视口就是你开发时候的时空,可是视口就是你在设备上可以 就看到的视口

具体实现<meat name=" viewport" content=" width=device-width"/>

下面说几个基本概念物理像素 设备像素  dpr

dpr(设备像素比)  = 设备像速/css像素

物理像素其实就是具体你的设备是怎么样的一个像素

例如常说的视网膜像素是两个就是两个物理像素2px *2px的device pixel(设备像速) 代 表一个css像素1px *1px

比如设备像速为640 * 1136px  而css 像素为320 * 568px 

移动端常见的布局

Rem布局 + 百分比布局

上手快,开发效率高,兼容性好,但不够灵活和精细

px + flexbox布局

flexBox非常灵活,但是flexbox的兼容性方面需要好好处理,不够精细

动态viewport布局

堪称完美的解决方案,但开发效率低, 成本比较高