网站设计中对px的理解_网页设计中像素、PX与百分比的迷惑

1、网页设计中上过界5px怎么表示？

margin-top:5px

2、1024px宽的图片怎么在网页设计中使用？

这个尺度可以了，适合17寸的显示器及以上，要考虑到大多数用户还在用17寸的

3、相比px而言，在响应式web设计中，em有何优势

PX:
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如TOPVE唯艺互动的基准就是16px=1em。
em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算
1、任意浏览器的默认字体大小都是16px。
2、所有未经调整的浏览器都符合: 1em=16px 12px=0.75em 10px=0.625em
3、为了简化font-size的换算，在body选择器中声明font-size：62.5%，这就使em值变为
12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

以上就是TOPVE唯艺互动对于响应式网站设计中PX与EM优缺点的总结和整理。如果您还对此有疑问，可以到他们网站看看他们是怎么使用EM和PX来进行网站设计的。

4、现在网页设计中的为什么少有人用 11px，13px，15px 等奇数的字体

UI设计师的原因
多数设计师用的设计软件（如：ps）大多数都是偶数，所以前端工程师一般都是用偶数字体。
浏览器的原因
其一是为了迁就ie6，万恶的ie6会把定义为13px的字渲染成14px，你可以写个页面试试还有一个原因是，偶数宽的汉字，比如12px宽的汉字，去掉1像素的间距，填充了像素的实际宽是11px，这样汉字的中竖线左右是平分的，以“中”这个字为例，在12像素时，竖线在中间，左右各5像素，显得均衡。
其二像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看
实际应用

偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

5、在网页设计中表示字体大小的怎么写呢，比如说18px

一般中文的字体大小是12px或者14px。随着显示器分辨率不断提高，12px的文字在大于1440*900的显示器里看起来会显得比较小，阅读起来不是很容易，所以现在网页设计里面用12px的已经比较少了，特别是文章正文部分，普遍都会用14px。13px的字体在IE6下面会有一点点显示上的bug，所以现在用得也不太多，不过随着IE6慢慢被淘汰，这个问题也不再是一个问题了。而对于标题栏的文字大小，没有特别的限制，视觉上感觉舒服就行。
字体大小代码：font-size:14px（字体大小14像素）
对于font-family，一般来说14px及以下大小的文字，应当设置为宋体，当然也可以设置为微软雅黑。不过在XP下默认是没有雅黑字体的，所以在css里面可以这样设置字体：
font-family:"Microsoft Yahei",simSun,Arial;
把几个字体用逗号隔开，如果系统没有第一种字体，就用第二种，如果没有第二种就用第三种，以此类推。

6、关于网页设计尺寸和字号大小

html页面中的文字大小在用户浏览器下默认渲染是“16px",也没有强行规定一定要用多大的，这个要看设计图来定。

CSS上可以用"em"来替代“px”,em是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。

为什么要用em,而不用px的关键点：

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。这意味这中国网站的字体大小可以被认为不可调。

(6)网站设计中对px的理解扩展资料：

网页构成

文字与图片是构成一个网页的两个最基本的元素。你可以简单地理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。

在网页上点击鼠标右键，选择菜单中的 “查看源文件” ，就可以通过记事本看到网页的实际内容。可以看到网页实际上只是一个纯文本文件。

它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。

为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。

网页通常有以下元素：

文字资料图像档案Applet（在页面内执行的副程式）超链结网页的合成体为网站，一个网站的开始点为首页。

7、现在网页设计中的为什么少有人用 11px，13px，15px 等奇数的字体

偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。

Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

这个我不确定，需要确认：听说有不少字体的 hinting 都只专门处理了常用的几个偶数字号。
除了上面说的这些，奇偶字号的字体渲染效果似乎其实差别不大（尤其在 OS X 和 Linux 以及手持设备上）。即使在 Windows 里，微软雅黑在 11 至 17 px 之间的奇偶字号效果似乎也都差不多。（呃，都差不多糟糕……）
目前 12、13、14、15、16 px 其实都是很不错的正文字号。知乎和豆瓣的正文字号都是 13 px，而中文维基百科的正文字号是 15 px，并没有什么不好。

另，@贺师俊指出：
早期的 Windows 里，中易宋体点阵只有 12 和 14、15、16 px，唯独缺少 13 px。

8、网页设计中像素、PX与百分比的迷惑

我来给你扫盲

首先：
像素就是PX 一个像素就是 1px，是绝对宽度，不随浏览器窗口大小变化而变化
百分比是指占整个浏览器的百分比，比如窗口最大化和调整窗口大小时会跟着变化

其次：
分辨率是以像素作为基本单位的分辨率为1024*768像素就是屏幕宽分为1024 列高分为768行的像素矩阵，
当你把分辨率由1024*768像素改为800*600时你会发现你的桌面图标会明显变大

现在回答你的具体问题：
1.上面已经提到屏幕分辨率的意思，如果CSS中是px（即像素），
比如为200PX
屏幕分辨率为1024*768像素那么其中横向的1024个像素中有200个是被该DIV占用的宽度，无论怎么改变浏览器窗口的大小DIV的宽度都不变

2.电脑分辨率与屏幕尺寸没有直接关系，不过一般不同尺寸的屏幕适合不同的分辨率
比如说你的屏幕可以选择设置为1024*768像素或者800*600，不过会对显示效果有影响，上面已经提到当你把分辨率由1024*768像素改为800*600时你会发现你的桌面图标会明显变大....不晓得你体会出来了没

3.div的width为50% 不是显示屏宽度的50%，而是浏览器窗口当前宽度的50%，（当浏览器窗口不是最大化时窗口大小可以调整）当浏览器窗口大小改变时 DIV的宽度也随之改变

4.网页上写最佳分辨率为1024*768像素就是他网页基本上定义为整个页面的宽度大约适合为1024px的，如果分辨率宽度小于1024则很可能网页有横向的滚动条，那样不怎么美观，如果大于1024像素的话网页两侧则会出现空白，同样影响美观

问题补充：如果你看懂我上面所说的，那么你应该知道答案了呵呵~~

9、网页设计布局中为什么实用margin：0px auto; 在IE下会不居中？都有哪些原因会造成这个问题???

如果谷歌火狐可以居中那麼你的IE 版本是IE5 才没办法居中现在谁还用IE5 - -
如果不是请上代码帮你看看

10、为什么网页中的图标常用16px，24px，32px 这些尺寸

提到图标设计，似乎每个设计师都有话说，但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理，从设计技巧到设计资源一应俱全，但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分，它们不仅能协助UI布局组织内容，而且轻量级的图标融入界面也不会喧宾夺主。不仅手机和平板的APP UI中会大量用到各种图标，而且iPod和智能手表的界面中也是如此，这正是因为图标具备快速直观传达信息的能力。在网页设计刚刚兴起的时代，小图标就已经被早期的网页设计师和开发者投入使用了。这些图案和标识通常是常见的、易于接受的、功能型的图形(文件夹、打印机、鼠标、箭头等)，在随后的20多年间，这些图标逐渐发展成约定俗成的一套图形语言。在接下来的设计指南中，我想分享一些网页设计中图标使用的技巧，以及一些实用的免费图标素材合集，希望你能喜欢! 图标设计样式我们通常所说的“图标设计”其实覆盖了相当大的一个范围。小到网页中那些纯色扁平小标识，大到PS和AI精雕细琢的拟物风APP图标，都在图标设计的范畴内。每个图标设计项目都有着不同的设计需求和图标风格，这些不同造就了图标设计的差异化。目前所流行的极简风和扁平化设计，已经在全世界设计师中拥有了无数的拥簇。而之前一直不温不火的线性图标也已经成为了目前iOS系统的首选图标，其他的移动操作系统也正在逐步跟进。从风格上来说，图标并无对错之分，只能说是各自选择和偏向不一样罢了。在我看来，扁平化设计和拟物化设计之间的竞争对比，对于网页设计而言是一件无比美妙的事情。这也对图标设计产生了影响，许多艺术领域的概念被引入到图标设计中来，比如光影变化，深度，等等。作为设计师的你如果更倾向于扁平化设计，那么你需要学习创建纹理，控制阴影，让你的设计看起来富有真实感。为此你需要进行大量的练习，但是这绝对是值得的。企业品牌设计虽然品牌设计看起来是显而易见的事情，但是它依然值得一提，因为那些优秀的网站通常有着优秀得令人难以置信的品牌设计。一个优秀的图标能向用户传达出品牌的理念和情感。当你为一个企业或者网站进行品牌设计的时候，品牌的图标、吉祥物或者符号应该让品牌和它的用户之间形成独特的情感联系。当然，你也可以为品牌设计一系列不同的图标，每个图标包含不同的效果，传达不同的理念。图标设计的可能性是如此之多，你甚至可以设计出以个图标大合集，让所有不同的图标拥有相同的风格。由于每个图标都是独特的存在，但是风格又如此一致，当它们运用到网页中的时候，可以让整个网页拥有独特的气质，足以从诸多设计中脱颖而出。 MailBakery 就是这样一个典型的案例，它使用了个大图来宣传它们的服务。当光标移动到下方每一个图标上的时候，上方的大图内容会被替换成相应的图片内容，这样的图标+图片的组合在设计上保持着高度的一致性。这些图标所对应的图片可以说是专门为网站定制的，但是这些图标却是某个免费图标集的一部分。你可以在几十个不同的网站上看到这些相同的图标，也就是说，这些图标作为潜在品牌设计的独特性，已经被忽略掉了，他们其实可以做的更好。也正是因此，我常常建议有报复的图标设计师去学习为界面单独定制成套的图标集。对培养品牌、客户以及项目而言，这都是更为长远更有价值的事情。导航链接在过去，网页上的图标常常用作内容导航，也就是说，图标的内容和含义，同图标所指向的页面内容/性质高度相关或者一致。今天，Facebook上的导航也遵循着同样的原则。虽然你不会一直遵循这样的设计方式，但是有必要且值得了解它。下拉菜单链接通常非常实用，因为用户会主动去了解每一个菜单的名称。但是如果在横向或者纵向上有十几个导航链接的话，通过图标来识别是比较可靠的方案。视觉内容识别在网页设计中使用业内图标最主要的原因是用来区分内容。图标可以从视觉上更清晰地传达信息，能够平衡包含大量文本的布局，所以，如何通过一个简单的图标来准确传达信息是设计师的必修课。我最喜欢的案例就是GitHub的教学页面。页头使用Github的吉祥物和粉笔黑板营造出教育的氛围，当你向下滚动的时候，每个板块都有单独对应的图标，为你说明这以块是干啥的。值得注意的是，每个图标都使用的是手绘的效果，虽然色彩不同，但是整体风格高度一致，明显是统一设计的一整套图标。更重要的是，每一个图标都明确直观地描述了它所在区块的内容。文字内容足以描述清楚细节，但是图标能高度概括地阐明信息。你可以在 Glazed & Infused 的首页看到类似的设计效果。文字小区块详细地描述了他们的服务、咖啡和礼品卡的信息，而顶部的手绘图标则从视觉上阐明了内容的性质，更重要的是，这三个图标迅速地抓住了用户的眼球。矢量背景从重复平铺背景到矢量对象，你可以用矢量图形做很多事情。对网站背景的处理方式，已经远不止于平铺纹理那么单一了。通过矢量图形来创建覆盖整个背景的场景已经很容易了。矢量图形可以很轻松地缩放，但是很难创造出逼真的效果。想制作出复杂样式的矢量图形并不容易，你需要通过大量的练习来熟悉在图形上构建图形的技巧，不过一旦学会还是蛮有趣的。在这里我们推荐一个好用的工具：Bota Iusti。设计教程跟踪学习在线的设计教程是提高图标设计技能的重要方式。想要精通设计技能没有捷径，唯有不断学习，坚持练习。虽然图标设计是一个广泛的领域，但是许多教程是可以举一反三的，接下来提供的一系列教程非常实用，希望你能通过学习融入日常的设计中去。 16×16 px Icons Weather Line Icons Flat Social Icon Tab Bar Icons Bat Icon Gem Icons Water Pistol Mail Alert Notebook Almost Flat 免费图标 40 Flat Icons Mini Icons Colorful Iconset Simple Flat Sport & Fitness Chat & Email Atitel Icons Tab Bar Icons Simple Lines Flatified Web Design Iconset iOS Settings Icon Colorful Switch Synthesizer Book App Icon

导航:首页 > 万维百科 > 网站设计中对px的理解

网站设计中对px的理解

与网站设计中对px的理解相关的知识