移动开发中的基础知识总结

叁歲伎倆 2023-02-23 03:53 8阅读 0赞

> **序言**： 致每一位读者：你们好！ 我叫 Changlon \[昌龙\] ； 是和各位一样奔跑在编程道路上，期望**用编程改变世界，改善生活**的奔跑者。  
>   
> 写文章的初心: 方便以后复习，方便未来面试，结交更多道友，交流心得经验…  
>   
> 如果你也对**前端 , Java , C/C++, 算法, 人工智能** 感兴趣那就关注我吧！我们一起学习进步！

### 文章目录 ###

*  一 屏幕
 *   *   *  （1）分辨率
 *  二 长度单位
 *   *   *  （1） 绝对单位
         *  （2）相对单位
         *   *  独立像素比
             *  二倍图
 *  三 视口概念
 *   *   *  1.PC端的视口
         *  2.移动端的视口

> 年底了，不能不搞点事情。宿舍里学习的学习，约会的约会。。。我呢也不能闲着，总结一遍移动开发中的一些必备知识，算是给今年的自己一个跨年仪式吧！废话不多说，开始！

# 一 屏幕 #

屏幕这个概念大家都应该知道 如手机的屏幕,电脑的屏幕,等等设备的屏幕。这些屏幕都是由一个个**像素点组成**，我们称为**物理像素**。通常用单位1 px表示一个像素。

**不同的设备的物理像素点的大小有些还是不一样的。** 比方说iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）  
但是屏幕分辨率却分别为**480 \* 320px**、**960 \* 480px**；

这就是因为虽然两个设备屏幕的尺寸(in)虽然一样，但是组成这个屏幕的像素点的大小是不同的；显然iPhone4/S屏幕的物理像素点更加密集，所显示的画质更加清晰。

**由此我们可以得出英寸是一个绝对长度单位，而像素(px)是一个相对长度单位（像素并没有固定的长度）。**

### （1）分辨率 ###

顾名思意分辨率其实就是描述设备屏幕的一种度量单位！  
比放说 **1920 \* 1080** 的分辨率其实就是指屏幕上**宽有1080个物理像素长度，高有1920个物理像素长度**。

**有时候分辨率还可用来描述像素密度的。**  
什么是像素密度？比如你的手机是**3.5英寸**的（指对角线的长度为3.5英寸）。  
你的手机分辨率是**960 \* 480px**的那么你的**屏幕像素密度**就是

√960^2+480^2 / 3.5   说白了就是求对角线每英寸有多少个物理像素；即给它一个新的单位叫ppi

。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70]

# 二 长度单位 #

> 就像我们生活中的米，厘米，等等一些长度单位一样，在移动设备，或者对于屏幕，也有许多长度单位来描述屏幕的一些硬件信息。  
> 比如一些长度单位 dp,pt,px,em…还有一些 in,cm…的长度单位。

### （1） 绝对单位 ###

> 绝对单位很好理解，就是有固定数值或长度的单位如in,cm这些。  
> 多长都是很形象的。  
> 如我们定义一个2\*2英寸的div.那么在样式中就可以直接用这些显然的单位。

### （2）相对单位 ###

相对单位就是 **一个相对的单位它没有参考的长度或数值** 比如我们上面提到的,**dp,pt,px,em**这些。那这些单位又是怎么度量的呢？  
我们设想一下这个场景。还是拿iPhone3G/S和iPhone4/S来举例。首先我们要知道的就是iPhone3G/S和iphone4屏幕的差别：i4的屏幕采用的是视网膜屏他的一个物理像素比i3G的小了一倍。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70 1]这样在3gs上显示效果刚好的图拿到i4上显示会变小到原来的**1/4**。  
这是因为i4的物理像素点是3gs上的像素点的**1/2**。

**但我们想要的是一张图片在不同设备上的大小是差不多一样的！**  
那想想我们该怎么做？  
如果要是有一种新的单位能使得在两种设备上做出一个统一的适配那该有多好！  
**那就得定义一种新的单位来作为一种统一的约束是的一个单位的物理长度在两种设备上都是差不多的**。比如说我们定义一种单位叫做 dp。针对上面这种情况我们怎么来解决显示大小问题呢？那么就得有一种内部机制使得1dp的长度在3gs上就是1个物理像素长度，而在i4上1dp的长度则是2个物理像素长度。那么我们要显示一张4 \* 4的图片在 3gs设备上用4 \* 4dp用了4 \* 4个物理像素即 (**16个物理像素**)，在i4上则用了8 \* 8个物理像素即（**64个物理像素**）。

那么最后就能达到一个在不同设备上显示大小差不多的效果！  
我们把上面的这种dp单位也叫 **逻辑像素单位**这种像素称**设备独立像素**在安卓上的逻辑像素单位是(dp)，而在ios上的单位则是(pt).

#### 独立像素比 ####

那么随之而来的一个概念就是独立像素比了，它就是一个比值。  
像iPhone3G/S的独立像素比是1，iPhone4/S的比是2是设备配置中自带的。  
我们**以第一代设备为基准**，在它之后的屏幕物理像素也越来越小，有二倍小的就有三倍小的，越小它显示图片的精度就越大，显示图片就越清晰!  
在浏览器上可以通过window.devicePixelRatio来获取这个比值。  
我们可以根据获取到的比值去判断设备的物理像素大小，然后做出不同的适配方案。  
如一张图片我们要准备有一倍的或二倍(2 \* 2)的，或三倍(3 \* 3)的根据设备的像素比值的不同而去适配不同的图片！

#### 二倍图 ####

所谓的二倍图就是宽高是原来标准配置图的两倍。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70 2]就像刚才上面的，如果我们使用了这种逻辑像素来作为单位虽然说图片的大小问题的确解决了，但是你再想想，如果一个4 \* 4物理像素的图片在3gs上显示效果刚刚好的话那么拿到i4上则会变小。我们用逻像像素单位设置可以将这个图片放大，但是你想想啊，原本图片就是4 \* 4个物理像素（以3gs为参照）做成的，拿到i4上用逻辑像素显示会出现失真的效果，即使是图片放大了，这时候我们就要针对i4设备专门做一组8 \* 8个物理像素(以i4为参照)的图片。这样显示就刚刚填好这8 \* 8个物理像素，大小差不多的同时所用的像素更多了，显示也就更加清晰了。

**css像素**  
css像素是要好好总结！何为css像素?就是我们网页设计时用到的像素单位。它也是一种相对的像素不是绝对的。为什么这个说呢？因为1个css像素所表示的物理像素不是固定的！在pc端1个css像素就是一个物理像素的长度，即1px就是电脑屏幕上的一个物理像素点！而在移动端就不是那样的了。因为移动端上的像素点比电脑上的要来的小，所以我们在pc上的1px可能在移动端就得要几个物理像素来实现！因为要保持大小差不多（忽略视口概念）

# 三 视口概念 #

> 主角来了！话说呀，如果咋们的css像素在移动端要保持pc端电脑网页一样的大小那么手机的屏幕肯定是放不下的啊！就得添加滚轮，非常影响美观！所以出现了视口的技术来解决在移动端也能显示整个pc端的网页问题！

### 1.PC端的视口 ###

先来看看视口到底是啥！在pc端它的视口决定着html这个标签的大小，视口的大小和浏览器一样大小。可通过document.documentElement.clientWidth来获取视口大小。布局的元素超出视口大小就会出现滚动条！

### 2.移动端的视口 ###

在移动端有两个主要的视口，即理想视口和布局视口。理想视口即屏幕的大小，而布局视口则比理想视口要大的多，不同的厂商定义的大小不一样，一般来说i4是980\*480pt(注意这里不是物理像素是逻辑像素单位)形象的说就是这么个东西。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70 3]当我们在手机上浏览电脑的网页时，会有一个布局视口在这个视口和一个电脑屏幕的长宽差不太多，在这个视口上面css单位和dp,pt逻辑单位是一样的，会计算用多少个物理像素显示能和pc端差不多。一切布局先是在这个视口上面，然后为了能在理想视口完全显示布局视口的内容，会将布局视口的内容等比例缩小在理想视口上，这时css像素所表示的物理像素变少，因为内容要缩放。这就是为什么我们在移动端所看到的图片，文字较电脑上的要来的小得多。只要改变布局视口的大小为理想视口的大小，那么我们就相当于直接在理想视口上布局。也就省去了缩放，一开始设计多大显示就多大。这就是为什么移动开发中为什么总是加一句viewport width=“device-width”…这个步骤的原因。  
这里讲解视口并不是很详细，具体可以去参考这边两篇文章  
[逻辑像素补充][Link 1]  
[更多视口相关请点击此链接][Link 2]

--------------------

***由于本人技术水平有限，博客中难免出现的一些错误，有纰漏之处恳请各位大佬不吝赐教！***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191231190043828.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191231193022216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191231200528825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191231205245969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MzkyNzMz,size_16,color_FFFFFF,t_70
[Link 1]: https://www.cnblogs.com/wmhuang/p/6817057.html
[Link 2]: https://blog.csdn.net/Amanda_wmy/article/details/79487709?utm_source=app%22%3Ehttps://blog.csdn.net/Amanda_wmy/article/details/79487709?utm_source=app