<CSS>总结：常用分辨率

html-css05

<CSS>总结：常用分辨率,第1张

128x128、128x160、240x320（常见2.0、2.2、2.4、2.8寸屏手机使用）

320x240（常见2.4寸屏手机使用）

240x400（常见3.0寸屏手机使用）

320x480（主流屏常见3.2、3.5寸屏手机）

360x640（诺基亚常见）

480x800（常见4.0寸屏使用）

480x854（常见3.7寸屏使用）

960x540（QHD常见4.0、4.3、4.5寸使用）

960x640（常见苹果机使用）

1136x640（常见苹果5使用）

1280x720（HD主流屏常见4.3、4.5、4.7、5.0、5.5、5.7、6.0寸屏使用）

1280x768（常见4.5寸屏使用）

1280x800（常见三星5.3寸及平板电脑使用）

1024x600（常见7.0寸屏平板电脑使用）

1024x768（常见LG5.0寸屏及7.9寸9.7寸平板电脑使用）

1920x1080（FHD主流屏常见4.7、5.0、5.0、5.7、6.0寸手机及电视使用）

1920x1280 （常见9.0寸平板电脑使用）

1920x1200（常见10.1寸平板电脑及酷派大神7.0使用）

2048x1539（常见苹果iPad 及国产一些平板使用）

2560×1440（2k屏）

4096×2160（4K屏常见电视使用）

1024x600（常见8.9寸电脑使用）

1024x768（常见10.4、12.1、14.1、15寸电脑使用）4:3

1280x1024（常见14.1、15寸电脑使用）5:4

1440x1050（常见14.1、15寸电脑使用）4:3

1600x1200（常见15、16.1寸电脑使用）4:3

1280x800（常见10.8、12.1、15.4寸电脑使用）16:10

1366x768（常见15.2寸电脑使用）15:10

1280x854（不常见）16:9

1440x900（仅苹果17寸电脑使用）16:10

1600x1024（不常见）14:9

1680x1050（常见15.4、20寸电脑使用）16:10

1920x1200（常见20寸电脑使用）16:10

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

320dp：一个普通的手机屏幕(240X320，320×480，480X800)

480dp：一个中间平板电脑像(480×800)

600dp：7寸平板电脑(600×1024)

720dp：10寸平板电脑(720×1280，800×1280)

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

iPad第一代第二代尺寸是1024x768px分辨率是132PPI

iPad Mini尺寸是1024x768px分辨率是163PPI

1、800x600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024x768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024x768页面的标准大小是955x600,照着它的尺寸做就行了)

3、在ps里面做网页可以在800x600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740x560左右

4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.

页面标准按800x600分辨率制作，实际尺寸为778x434px

页面长度原则上不超过3屏，宽度不超过1屏

每个标准页面为A4幅面大小，即8.5X11英寸

全尺寸banner为468x60px，半尺寸banner为234x60px，小banner为88x31px

另外120x90，120x60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

1、120x120，这种广告规格适用于产品或新闻照片展示。

2、120x60，这种广告规格主要用于做LOGO使用。

3、120x90，主要应用于产品演示或大型LOGO。

4、125x125，这种规格适于表现照片效果的图像广告。

5、234x60，这种规格适用于框架或左右形式主页的广告链接。

6、392x72，主要用于有较多图片展示的广告条，用于页眉或页脚。

7、468x60，应用最为广泛的广告条尺寸，用于页眉或页脚。

8、88x31，主要用于网页链接，或网站小型LOGO。

iOS开发过程中使用pt（point）。1pt代表1个逻辑像素。

如果是1x屏幕（最老的非视网膜苹果设备，已经慢慢淘汰了）则1pt=1px；

如果是2x屏幕（从iPhone4到iPhone6之间所有的iPhone，及iPad3至今所有的iPad）则1pt=2px；

如果是3x屏幕（iPhone6 Plus及后面可能出现的更新的设备）则1pt=3px。

设备像素dp(device pixels)

ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目，数值越高，代表屏幕能以更高的密度显示图像。

计算公式：ppi=像素数量/物理尺寸（英寸数）

ppi就是设备像素dp(device pixels)的单位。

举例：

一个3.5寸的分辨率为320*480的屏幕a，ppi是(根号(320^2 + 480^2)) / 3.5 = 164，约等于160。

一个3.8寸的分辨率为480*800的屏幕b，ppi是(根号(480^2 + 800^2)) / 3.8 = 245，约等于240。

一个4.3寸的分辨率为480*800的屏幕c，ppi是(根号(480^2 + 800^2)) / 4.3 = 217，约等于210。

一个4.3寸的分辨率为720*1280的屏幕d，ppi是(根号(720^2 + 1280^2)) / 4.3 = 342，约等于340。

一个5.5寸的分辨率为720*1280的屏幕e，ppi是(根号(720^2 + 1280^2)) / 5.5 = 267，约等于260。

一只笔的像素如下：

这只笔在屏幕c,d,e下的显示效果如下：

设备独立像素dips(device-independent pixels)

可看到同一张图片在各屏幕显示大小不一。

我们希望不同屏幕显示图片的大小要一致。

我们要计算图片缩放比例。

计算公式：

图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = 设备像素dp / 设备独立像素dips

px2 = px1 * (dp / dips)

px2 = px1 * dpr

此时，这只笔在屏幕c,d,e下的显示效果如下：

设备像素比dpr(devicePixelRatio)

devicePixelRatio是设备像素dp和设备独立像素dips的比例，

也就是dpr = dp / dips

css像素

css像素是一个相对单位。

相对不同屏幕，其实际像素大小不同。

我们定义时，是定义其逻辑像素。即该图要用多少个像素来显示。