移动开发中的基础知识总结
序言： 致每一位读者：你们好！ 我叫 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
。
二 长度单位
就像我们生活中的米，厘米，等等一些长度单位一样，在移动设备，或者对于屏幕，也有许多长度单位来描述屏幕的一些硬件信息。
比如一些长度单位 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的小了一倍。
这样在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)的根据设备的像素比值的不同而去适配不同的图片！
二倍图
所谓的二倍图就是宽高是原来标准配置图的两倍。
就像刚才上面的，如果我们使用了这种逻辑像素来作为单位虽然说图片的大小问题的确解决了，但是你再想想，如果一个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(注意这里不是物理像素是逻辑像素单位)形象的说就是这么个东西。
当我们在手机上浏览电脑的网页时，会有一个布局视口在这个视口和一个电脑屏幕的长宽差不太多，在这个视口上面css单位和dp,pt逻辑单位是一样的，会计算用多少个物理像素显示能和pc端差不多。一切布局先是在这个视口上面，然后为了能在理想视口完全显示布局视口的内容，会将布局视口的内容等比例缩小在理想视口上，这时css像素所表示的物理像素变少，因为内容要缩放。这就是为什么我们在移动端所看到的图片，文字较电脑上的要来的小得多。只要改变布局视口的大小为理想视口的大小，那么我们就相当于直接在理想视口上布局。也就省去了缩放，一开始设计多大显示就多大。这就是为什么移动开发中为什么总是加一句viewport width=“device-width”…这个步骤的原因。
这里讲解视口并不是很详细，具体可以去参考这边两篇文章
逻辑像素补充
更多视口相关请点击此链接
由于本人技术水平有限，博客中难免出现的一些错误，有纰漏之处恳请各位大佬不吝赐教！
移动开发中的基础知识总结相关推荐
- OpenGL开发之旅基础知识介绍
最近由于手机项目中需要用到OpenGL ES的知识,所以这段时间正在研究OpenGL的相关知识.因为OpenGL ES是OpenGL的剪裁版本,所以我直接从OpenGL入手,然后再去看OpenGL E ...
- 第76节:Java中的基础知识
第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...
- 微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
- C语言中重要基础知识的概述
本章主要对于C语言中的基础知识进行一个大致的描述,适合有C语言基础但长久没接触C语言开发的人员进行快速回忆.在总体回忆基础知识之前,先来创建一个C程序.笔者的编译器是visual stduio2013 ...
- oracle不属于dml,Oracle中DML基础知识
DML(insert,update,delete) 1.插入数据 insert into 表名(列,列...)values(值,值...) //当插入的数据与表格一一对应时,列可以省略 insert ...
- lsdyna如何设置set中的node_list_ANSA中进行二次开发的Python基础知识
ANSA.META的二次开发均基于Python开发.本文基于ANSA的帮助文档<Introduction to Python>进行一定的扩展,希望能帮助大家快速掌握这门语言. 首先来介绍下 ...
- 音视频开发必备基本基础知识（1）
最近收到了朋友邮寄过来的一本书,刚拿回来就趁机学习了一波音视频开发的知识.现就音视频开发的一些基本知识做一个总结.如下: 1.视频编码 通过特定的压缩技术,将视频格式文件转换成另一种视频格式文件的方法 ...
- 开课吧：Web开发要学习哪些基础知识？
今天带来的知识点主要是让大家在学习过程中有一个清晰的思路,如果想在网络后端开发的道路上走得更远,还需要修炼自己的内功,这些基础知识是很重要的. 前端知识 最好能了解一些前端知识(HTML,CSS,Ja ...
- 网站前端开发必会基础知识有哪些？
自己工作做得好好的,怎么非要去搞前端?" 很多人离职的时候,可能印象最深的就是爸妈每天说的这句话.起因很简单,就是自己辞了爸妈眼中的"铁饭碗". 他也是如此,毅然辞去了一 ...
- 学习游戏软件开发需要哪些基础知识
随着互联网技术的不断进步,游戏动画产业得到了大众的接受和尊重,现已发展成为最受欢迎的产业之一.许多游戏开发公司也变得越来越繁荣.许多游戏玩家开始转向游戏开发,学习游戏开发.他们必须了解游戏开发的基础需 ...
最新文章
- [转]大三下，我们该做什么？一篇被转万次的日志，你值得一看
- android工程混淆和反编译
- 编程方法学6：操作符
- 【快乐水题】1816. 截断句子
- android layout过程分析,Andriod 从 0 开始自定义控件之 View 的 layout 过程 （八）
- 一起走过一段不平凡的路
- canal 使用注意事项
- redis源码dict.c simple reading
- mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
- 4g网络什么时候淘汰_4G升级5G，4G网络不会被淘汰，与5G继续共存
- 08系统服务器多开教程,一个四开战士的多开工具 宏及经验全面教程
- php 微信机器人_php7 版本的微信机器人来了！（这应该是最灵活的版本了）
- 电信跨域跨系统业务实践
- oracle中两个日期相减
- PS学习总结一：入门版必备的基础功能
- win10系统如何设置局域网服务器,win10系统设置局域网地址的操作方法
- Java中修饰变量和方法的关键字总结分析
- 微信声音锁会上传到服务器吗,微信声音锁：你再也不用担心忘记密码了
- Simulated Binary Crossover（SBX）的学习
- 农村中学扩建工程全套CAD施工图哪里找？