认识达内从这里开始

随着互联网的不断发展，web前端开发成为了又一个热门的求职岗位。今天，我们就一起来了解一下，作为合格的web前端程序员需要掌握哪些开发知识。

一、基础知识

1、屏幕

移动设备与PC设备大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。

通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度(一般用英寸来度量)。

而分辨率则一般用像素来度量px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

2、长度单位

在Web开发中可以使用px(像素)、em、pt(点)、in(英寸)、cm(厘米)做为长度单位，我们常用px(像素)做为长度单位。

我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。

例如：iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸(in)但是屏幕分辨率却分别为480x320px、960x480px，由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位(像素并没有固定的长度)。

3、像素密度

DPI(DotsPerInch)是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的小单位不是墨汁点而是像素，所以用PPI(PixelsPerInch)值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。

4、设备独立像素

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态(如iPhone3G/S为163PPI，iPhone4/S为326PPI)，像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。

如下图，假设你设计了一个163x163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1x1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5x0.5寸大小了。

但是做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(DeviceindependentPixel)或DP。

举例说明就是iPhone3G(PPI为163)1pt=1px，iPhone4(PPI为326)1pt=2px。

通过上面例子我们不难发现pt同px是有一个对应(比例)关系的，这个对应(比例)关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过window.devicePixelRatio可以获得该比例值。

所以，我们如何处理在不同pt/px比例上使得显示相同大小的图片呢?

很简单，在美工设计图片的时候，多设计几种尺寸的图片。

5、像素

5.1、物理像素

物理像素指的是屏幕渲染图像的小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。

5.2、CSS像素

CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的(1个单位的CSS像素等于1个单位的物理像素)，但是我们可通缩放来改变CSS像素的大小。

我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素，通过缩放，一个CSS像素可能大于1个物理像素，也可能小于1个物理像素。

二、调试

1、模拟调试

现代主流浏览器均支持移动开发模拟调试，通常按F12可以调起，其使用也比较简单，可以帮我们方便快捷定位问题。

2、真机调试

模拟调试可以满足大部分的开发调试任务，但是由于移动设备种类繁多，环境也十分复杂，模拟调试容易出现差错，所以真机调试变的非常必要。

有两种方法可以实现真机调试：

1、将做好的网页上传至服务器或者本地搭建服务器，然后移动设备通过网络来访问。(重点)

2、借助三方的调试工具，如weinre、debuggap、ghostlab(推荐)等。

真机调试必须保证移动设备同服务器间的网络是相通的。

三、视口

视口(viewport)是用来约束网站中块元素html的，即它决定了html的大小。

1、PC设备

在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。

在PC端，我们通过调整浏览器窗口可以改变viewport的大小，为了保证网页布局不发生错乱，需要给元素设定较大固定宽度。

2、移动设备

移动设备屏幕普遍都是比较小的，但是大部分的网站又都是为PC设备来设计的，要想让移动设备也可以正常显示网页，移动设备不得不做一些处理，通过上面的例子我们可以知道只要viewport足够大，就能保证原本为PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。

在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览器会设置一个默认大小的viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸。

节选：公众号：Web前端之巅

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。