网站界面尺寸大小_网站界面尺寸大小怎么设置

网站界面尺寸大小_网站界面尺寸大小怎么设置

感谢大家在这个网站界面尺寸大小问题集合中的积极参与。我将用专业的态度回答每个问题，并尽量给出具体的例子和实践经验，以帮助大家理解和应用相关概念。

文章目录列表:

1.UI界面设计尺寸应该是多少_ui设计标准尺寸

2.电脑更改浏览器页面大小的两种方法|电脑中如何设置浏览器页面大小

3.设计简单的静态的网页设计,尺寸是多大

4.UI尺寸规范

5.网页设计如何设置宽度网页设计如何设置宽度和高度

6.手机网页设计多大好?

UI界面设计尺寸应该是多少_ui设计标准尺寸

（1）我们用Photoshop做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

（2）目前主流的iOS设备iPhone6s/7/8Plus和iPhoneX采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

（3）注意：在进行iphonex设计的时候我们依然可以采用熟悉的iphone7的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

电脑更改浏览器页面大小的两种方法|电脑中如何设置浏览器页面大小

我们在使用电脑过程中，经常会需要使用浏览器来浏览网页。而浏览器页面大小也是可以调节的，如果你觉得网页太大或太小，都可以设置自己的网页大小。接下来，就随小编看看电脑更改浏览器页面大小的两种方法。

方法一：

打开浏览器，打开要访问的页面，按住Ctrl键，然后滑动鼠标上的滑轮，向上滑是放大，向下滑是缩小。经常有用户因为误操作此项而让网页变大或变小。

方法二：

点击浏览器上的菜单选项，在网页缩放中选择自己需要的比例，如果用方法一调整之后不知道现在的比例是多少，也可以使用这方法直接选择100%的比例恢复原状。

电脑更改浏览器页面大小的两种方法就为大家介绍到这里了。不同的浏览器界面会有所不同，不过方法一的快捷键是通用的，包括IE浏览器上也是可以使用，方法二每个浏览器的位置可能不同，不过都有这个选项，只要找到就可以设置了。

设计简单的静态的网页设计,尺寸是多大

许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解.

网页设计标准尺寸:

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

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

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

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

页面标准按800*600分辨率设计，实际尺寸为778*434px

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

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

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸网页教学网

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

网页教学网

标准网页广告尺寸规格

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

二、120*60，这种广告规格主要用于做LOGO使用。

三、120*90，主要应用于产品演示或大型LOGO。

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

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

六、392*72，主要用于有较多展示的广告条，用于页眉或页脚。

七、468*60，应用_为广泛的广告条尺寸，用于页眉或页脚。

八、88*31，主要用于网页链接，或网站小型LOGO。

广告形式像素大小_尺寸备注

BUTTON120*60(必须用gif)7K

215*50(必须用gif)7K

通栏760*10025K静态或减少运动效果

430*5015K

Webjx.Com

超级通栏760*100to760*200共40K静态或减少运动效果

巨幅广告336*28035K

585*120

竖边广告130*30025K

全屏广告800*60040K必须为静态，FLASH格式

图文混排各_道不同15K

弹出窗口400*300(尽量用gif)40K

Webjx.Com

BANNER468*60(尽量用gif)18K

悬停按钮80*80(必须用gif)7K

流媒体300*200（可做不规则形状但尺寸不能超过300*200）30K播放时间小于5秒60帧(1秒/12帧)

网页中的广告尺寸

1.首页右上，尺寸120*602.首页顶部通栏，尺寸468*603.首页顶部通栏，尺寸760*60

4.首页中部通栏，尺寸580*605.内页顶部通栏，尺寸468*606.内页顶部通栏，尺寸760*60

7.内页左上，尺寸150*60或300*3008.下载地址页面，尺寸560*60或468*60

9.内页底部通栏，尺寸760*6010.左漂浮，尺寸80*80或100*100

11.右漂浮，尺寸80*80或100*100以上几种说法可能有点小的出入，大家可以探讨一下

UI尺寸规范

1、界面尺寸：1920-2000px带有底图必须那么大（无底图的1366-2000px）

2、版心：980-1220px

3、Banner高度建议870px；

4、分辨率72px

5、色彩模式RGB

6、按钮高度为文字字高的的2-2.5倍

7、字体

导航：14px

字体：宋体 微软雅黑

字号：12、14、16、18、20px

专题页字体建议是12、14px，电商主页建议：16、18、20px

8、焦点图高度：600px-700px

1、尺寸：730x320px

2、登录界面的字体：12px 宋体 字体样式无

3、文本框高度为文字字高的的2-2.5倍

4、头标与框高度为20px

1、企业占中颜色尽量控制在三种以内

2、背景色：70% 主色调：25% 强调色：5%

背景有底纹画布大小建为1920-2000px

背景无底纹画布大小建为1366-2000px

4、版心宽度 980px 或 1000px 左右

5、焦点图高度小于580px 底部坐标到580px

6、在做企业站中要使用_字体：宋体（Banner图除外）

1、头部注册、登录：12px 宋体

2、导航：16 18px 仿粗 底色块高度为字高的2-2.5倍

下拉导航与导航为从属关系建议使用小一号字体14px

内容区域的文字一般分为标题和正文两种，可以选择_字号，用仿粗区分

文字区域到表框的边距一般为10px-20px;

版权信息文字用12px

1、1寸：2.5x3.5cm 5寸：12.7x8.9cm

证件照拼版建议画布大小为12.7x8.9cm

横版：90x54mm? 90x55mm

竖版：50x90mm? 45x90mm

圆角名片：85x54mm

折叠名片尺寸不固定

使用材质：纸张（大于200g）

四色印刷：CMYK ? 出血值1mm

名片的主要内容：公司名称? LOGO 姓名? 职务? ****? 业务范围

1、名片边缘留足5-10mm距离

2、logo大小不能小于1cm

3、名片中_小的文字不能小于6px

1、将所有文字转曲（交与客户源文件）ctrl+a- ctrl+shift+o

2、交与印刷厂PDF格式，不保留AI编辑功能

3、加入出血值

1、x展架尺寸：60x160cm? 80x180cm

易拉宝：高200cm? 宽80? 90? 100? 110? 150cm? 常见的为80*200cm

展架、易拉宝输出方式为写真机，写真机输出幅面一般为：90? 120? 150cm

易拉宝输出材质：相纸（背面无胶）

展架：背胶纸（背面有胶） 装裱在KT版上

输出方式：写真：1软件可以使用ps软件（黑色为四色黑）

2、颜色模式可以为RGB也可以用CMYK

3、文档建立尺寸和实际尺寸一致，不需要加出血

4、展架易拉宝分辨率为72或80，特殊情况可以使用300（封面）

5、查看画布效果时，缩放比例为100%

6、使用黑色必须为四色黑（CMYK都为100），不能使用单色黑，使用单色黑，制作出的易拉版展架会有条纹。

7、背景的过度使用弱对比：色相H接近或相同，饱和度S差值在30以内或者明度B差值在30以内

8、强对比（背景与要_的产品或文案）：色相H相反，饱和度S差值在70以内或者明度B差值在70以内。

1、四色印刷----CMYK(专色印刷要出专色版)

2、成品尺寸：制作一个90*120的三折页（从印刷厂制作完成后并且折叠后的尺寸）

2、展开尺寸：宽度 90+90+90=270? 高度210

2、制作尺寸：展开尺寸+出血

2、大16K：210*285 毫米 ?成品尺寸 ：95*210或90*210 正度16K：185*260毫米

iPhone：320x480? 640x960? 640x1136? 750x1334? 1080x1920

Ipad:1024x768? 2048x1536

Android:482x800? 720x1280? 1080x1920

Ipad、iPhone:状态栏：40px

导航栏：88px

主菜单栏：98px

内容区域：910px

状态栏：50px

导航栏和主菜单栏：96px

内容：1038px

1、iphone英文字体为Helvetica,中文为华为细黑，冬青黑体，不用微软雅黑。

2、可点击对象的区域：尺寸不要小于44*44px;

六、智能电视

分辨率模式：1920×1080、1280×720 我们常用还是1920×1080的分辨率进行设计

颜色与分辨率

1、不要使用纯白色（#FFFFFF）可采用#F0F0F0

2、高饱和度颜色尽可能少用，会显示失真

3、大范围渐变会导致带状显示，无法达到平滑过渡

4、在界面边缘_好留出10%左右的空间（54PX）

网页设计如何设置宽度网页设计如何设置宽度和高度

一般来说网页设计的宽度是多少？应该如何把握？

排名_的是360×640，是竖屏，只有在医院和学校才能看到。我们就到此为止吧。

第二位是1920×1080，占13.07%。

366×768排第三，占比6.32%。这说明目前主流的电脑分辨率是1920×1080。

第七分辨率，1024×768，是_小的计算机尺寸，只占3.13%，很少被人使用。在pc端设计网页的时候不应该考虑这个大小，而在适配pad端和手机端的时候应该考虑这个大小。

更_的响应式网站要在严格的网格规范下适应不同的宽度，以保证每个宽度下的显示效果。但是，这种成本也会相应增加。开发一个网站，需要综合考虑实际需求和开发成本。时代(时代官网)就是一个响应式网页的好案例。

扩展数据

网页设计注意事项:

1.网页设计的尺寸标准:

为1024-768显示分辨率开发的网页尺寸，宽度910px；

为800-600显示分辨率开发的网页尺寸，宽度778px；

2.网页设计中的画布设置:

注意分辨率72像素/英寸。

3.设计中的网页字体问题。

中文字体:特别注意“设置抗锯齿方法”选项选择“无”。

宋体是_常用的网页字体，12px是中文操作系统能显示的_小字体和内容。

文字大小有12px和14px两种(新vista据说可以表现10px的汉字，现在用的不多了)。

英文字体:_小英文字体为10px。verdana字体是大部分网页使用的英文字体，比arial字体更美观平衡。

效果图:

网页效果图中网页的字体，虽然在制作网页的_后过程中不需要裁剪。但作为设计中不可分割的重要元素，你一定要谨慎使用，因为你不仅要设计文字与整个网页的关系，还要设计字体的样式表颜色。

怎样在网站系统设置尺寸？

1、首先打开html编辑器，设置一个p并对p设置固定宽度和高度，还要在p里面插入一张。

2、接着在上方设置p和img的样式，将的宽度设置为何父级一样的宽度，代码就是“width:100%;”这里的100%会自动跟随父级的宽度选择，然后将父级的高度去掉，这样子集的高度就自动化了。

3、_后将设置为display:block;转为块状就可以了。

4、_后打开浏览器就可以看到固定大小的了。

做一个网页标准的像素用多少？

网页设计标准尺寸:

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

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值,1024*768页面的标准大小是955*600,照着它的尺寸做就行了)3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.页面标准按800*600分辨率制作，实际尺寸为778*434px页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即8.5X11英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含字节不超过60K，全尺寸banner不超过14K转来的。。。。我觉得说得很全面了

怎么用美图秀秀改变的尺寸，设置大小像素？

1、首先在打开美图秀秀软件。

2、打开后，选择“美化”，这时页面会自动跳转。

3、在新跳转的页面中，选择“打开一张图”。

4、在文件夹中，找到需要修改尺寸的，选择后点击“打开”。

5、然后我们点击右上角的“尺寸”按钮。

6、在“尺寸”界面中，可以根据需要修改的"宽度"、“高度”和尺寸单位。若是不想使用原图的长宽比，就将图中红框区域的对号取消便可。数据修改完后，点击下面的“应用”，尺寸就修改完成啦。

资料扩展

美图秀秀是2008年10月8日由厦门美图科技有限公司研发、推出的一款免费处理的软件，有iPhone版、Android版、PC版、WindowsPhone版、iPad版及网页版，致力于为全球用户提供专业智能的拍照、修图服务。

美图秀秀的特效、美容、拼图、场景、边框、饰品等功能，可以1分钟做出影楼级照片，还能一键分享到新浪微博、人_、QQ空间等。

2018年4月推出美图社交圈，鼓励年轻人秀真我，让社交更好看，美图秀秀也从影像工具升级为社区_。2018年11月28日，中消协召开新闻发布会，通报了100款_个人信息收集与_政策测评情况，测评显示，美图秀秀_涉嫌过度收集可识别生物信息、财务信息等。

PS手机端网页宽度多少合适？

中间内容区大小不能小于1000px，一般是1000-1200，高度不限制，导航栏是通栏，根据_的分辨率来，一般1920差不多了。操作方法如下：

1、首先单击文件按钮，在菜单中选择新建命令。

2、在新建文档对话框中，设置文档的详细信息，单击创建按钮。

3、然后单击工具箱中的圆角矩形工具。

4、在选项栏中选择‘路径’工具模式。设置半径为‘50’像素。

5、在文档中绘制出路径图形，然后设置前景色为白色。

6、在图层面板中，单击创建新图层新建‘图层1’。然后单击路径按钮‘切换到路径面板。

7、接着鼠标右击’背景图层‘，在弹出的快捷菜单中单击删除图层。

8、_后在对话框中单击’是‘删除背景图层，就完成了。

手机网页设计多大好?

iPhone手机网页的设计尺寸

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网页的设计尺寸

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

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

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

网站设计尺寸标准

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

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

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

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

页面标准按800*600分辨率制作，实际尺寸为778*434px

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

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

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸

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

网页广告标准尺寸规格

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

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

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

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

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

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

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

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

移动端网页设计尺寸标准

　涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。那么大家知道移动端网页设计尺寸标准是多少呢?下面一起来看看!

现象

　首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。

　不要被这些尺寸吓倒。实际上大部分的_和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。

　 像素密度

　要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。_典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。

　所以，我们要引入_重要的一个概念：像素密度，也就是PPI(pixels per inch)。这项指标是连接数字_与物理_的桥梁。

　Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指_末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

　 倍率与逻辑像素

　再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

　在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。

　在以前，iOS应用的资源中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要准备好，iOS会自己判断用哪张，Android道理也一样。

　由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率(iPhone 6plus除外，它达到了3倍)。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

　Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。

　如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：

　ldpi [0.75倍]

　mdpi [1倍]

　hdpi [1.5倍]

　xhdpi [2倍]

　xxhdpi [3倍]

　xxxhdpi [4倍]

　各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分?哪些手机是几倍的倍率呢?我们先看一张表，这是友盟2014年10月到2015年03月的数据：

　就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：

　ldpi 如今已绝迹，不用考虑

　mdpi [320x480](市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小)

　hdpi [480x800、480x854、540x960](早年的低端机，屏幕在3.5英寸档位;如今的低端机，屏幕在4.7-5.0英寸档位)

　xhdpi [720x1280](早年的中端机，屏幕在4.7-5.0英寸档位;如今的中低端机，屏幕在5.0-5.5英寸档位)

　xxhdpi [1080x1920](早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上)

　xxxhdpi [1440x2560](极少数2K屏手机，比如Google Nexus 6)

　自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

　不过需要注意的是，Android设备的'逻辑像素尺寸并不_。比如两种常见的屏幕480x800和1080x1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

单位

　不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android_都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

　单位之间的换算关系随倍率变化：

　1倍：1pt=1dp=1px(mdpi、iPhone 3gs)

　1.5倍：1pt=1dp=1.5px(hdpi)

　2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

　3倍：1pt=1dp=3px(xxhdpi、iPhone 6)

　4倍：1pt=1dp=4px(xxxhdpi)

　单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不_了。Android的_小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

　无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确_的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

Web怎么办

　移动端页面的_单位仍然是px，至少代码里这么写，但它的道理也和_一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用_的显示方式来渲染页面。根据像素密度，按相应倍率缩放。

　以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

实际应用

　大家_关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个_来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。

　之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的_项——单位与标尺界面，把尺寸和文字单位都改成点(Point)。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各_单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。

　要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字?

　首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实_中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。

　再说72，这有一定的历史原因。_早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

　现在回到正题，我们怎么通过DPI来调节倍率?既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。

下面来看看3个_各自的画布设置：

　iPhone

　iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。

　从市场占有率数据来看，目前_多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头_猛，未来有望登上_的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。

　按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。

　不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

Android

　都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于_了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。

　对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。

　当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。

Web

　手机端网页就没有_标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。

　这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素_小的。所以的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，不是特别清晰。

　如果追求质量，愿意牺牲加载速度，那么可以按照_的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。

总结

　移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

今天关于“网站界面尺寸大小”的讲解就到这里了。希望大家能够更深入地了解这个主题，并从我的回答中找到需要的信息。如果您有任何问题或需要进一步的信息，请随时告诉我。