整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页设计尺寸是多少?下面就来学习一下。
网页设计尺寸
制作网页时我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。但并不代表我们可以在整个画布上作图。
网页的布局主要有两种：左右型布局和居中型布局。布局的不一致，使可设计的空间也不相同。
左右结构型
1、左右布局，灵活性强，UI的限制小;
2、左边通栏为导航栏，宽度没有具体的限时，可以根据实际情况进行调整;
3、右侧为内容板块范围，是网站内容展示区域。
居中型
4、居中布局，中间的黄色部分为有效的显示区域，用于网站内容的展示。
5、换句话说，两边均为留白，没有实际用途，只是为了适配而存在。
6、内容限时区域在好控制在1000px-1200px。
网页常用字体
现在网页的布局我们已经了解了，那么接下来就是网页中常用到的字体。
字体设计的总原则是：可辨识性和易读性。
中文建议使用微软雅黑字体，英文则建议使用arial 字体。常用的字体大小号有以下几种：
1、12px是用于网页的最小字体，适用于突出性的日期，版权等注释性内容。
2、14px则适用于非突出性的普通正文内容。
3、16px或18px适用于突出性的标题内容。
4、网站的字体大小并没有硬性规定具体的字号，根据实际情况可以酌情考虑，但是要有限适用偶数字号。
5、字体规格也不需要太多，最好适用三种混搭。如果需要更多
6、层次的区别，可以改变字体颜色或加粗来体现。
网页设计WEB端设计规范总结
一.尺寸规范
在网页设计中首先要解决的是网页布局大小及尺寸的问题，在ps新建文档中可以见到当今常见web网页尺寸，最常见尺寸为1366*768像素。
二.网页的宽度尺寸
为了适应屏幕的显示，页面宽度设制要有一定的范围值，其实在设计及设计学中也没有相关硬性规定，但是为了兼容大多数浏览器一般是设置960px，随着现在浏览器分辨率的变化，已开始1000px,1200px宽度发展，例如淘宝(1000px)京东商城(1200px)。如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，工作量也就随之增加了。
三.主流浏览器
国际通用的有
chrome，IE，firefox，safari，opera
国内的知名浏览器有
QQ浏览器，猎豹浏览器，2345浏览器，搜狗浏览器，360浏览器，UC浏览器等
知道了浏览器的设计特点才能更好的设计页面，比如浏览器的头部的操作高度和信息的展示都会有所不同，那么页面在每个浏览器上面的展现就会有所不同。
四.点击操作
主要通过鼠标点击、滑动、滚动、拖拽。
网页设计所需注意事项
没有内容层次用户的眼睛喜欢有秩序的设计，如头部包含导航和LOGO，特定内容使用lightbox，三列分栏，页脚。它有助于在内心组织重要的信息，并引导用户注意在你想让他注意的地方。在传统艺术中，新手们被教导色彩价值和线性透视三原则和其他艺术指导。在网页设计中，没有特别奉行的准则，但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。
太多的色彩背景一种颜色，内容文本一种颜色，链接一种颜色，页头和lightbox一种颜色，图案和页脚各一种颜色。这很好，因为它帮助区分了有用的内容。但是，多重渐变几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色)，再搭配反相的单色(白灰黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。
太多的字体一般一个简单的网页设计，一般字体不超过3种。多则乱没有足够的空白空白可以说是设计中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间不考虑用户的分辨率。
对比的问题你考虑过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好，其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字，考虑一下改变字体大小或方式。
不一致，一致性是网页设计的关键。它是把网页设计组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的情况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体大小和色彩，用户很快会觉得不知所措。
没有足够的文字间距与空白有关，文字间距有两个部分，一个是字距，关系到字母之间的空白。一个是行距，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。
了解更多网络营销请关注珠海网站建设-杰作科技：www.jiezuo.org www.jiezuo.net www.jzuo.cn 珠海网站建设.com
原文链接：http://www.jzuo.cn/yingxiaodongtai/747.html
C 端网页设计对于很多从事 UI 行业的新人来说是一个充满未知的领域，对于怎么进行基本的画布创建，规格设置，都处于两眼一抹黑的状态。虽然这是因为多数人没有系统的学习 UI 知识，它并不是一个合理的现象。
接下来，我们会更新一些网页设计的干货，帮助更多 UI 设计师了解网页设计的基础知识。
首先，网页设计的第一步就是画布创建了，这也是困扰我们的第一个难题。由于市面上存在多种前端技术的应用，以及一些历史遗留问题、设计场景差异等因素的影响，我们在搜索「网页设计宽度」这类问题的时候，得到的结果会有非常多的版本，导致更加迷茫。
所以，了解网页设计的宽度定义，势必要理解它们的底层原因，因为宽度的设置：只有合适的宽度，没有绝对正确的宽度。
对于任何网页设计的项目，宽度设定的标准都是不同的，而在选择宽度的过程里，需要考虑 2 个核心因素：
1. 设备因素
设备因素即确认项目主要展示的屏幕设备是哪一种，它们对应的分辨率是多少。最粗略的划分，可以将设备划分成 PC 端和移动端。这两者受制与显示的尺寸，系统的限制，在设计和操作上都有比较大的区别。
浏览设备
浏览设备即网页用户所使用的屏幕类型，主要考量的标准是屏幕的分辨率（长宽像素数）。常见的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等，再加上一些更加不常见的（比如 surfacebook 的 3000×2000），可以列出数十种，这是大家都已经知道的事情。
所以基于这个前提，很多人会去查找关于屏幕使用分辨率的统计表格，比如下图这种，然后得出最常用的分辨率是 1080P。有了数据支撑，我们不就可以开始动手设计了？
实际上这个做法是错误的。对于网页设计来说，我们首先应该确定的是──最小适配屏幕。
因为在一般场景下，显示器分辨率如果大于画布，内容可以被我们正常访问；如果小于画布，内容就会显示不全，相当于低于这个分辨率设备的用户被我们放弃了。
所以，做个简单的计算，如果以 1920×1080 为基础，则支持的用户数为 27.38 %；如果是 800×600，则支持用户数低于 3%。
这么考虑的话，我们是不是只要支持最小的分辨率即可？当然也不是。
在今天，1024 以下宽度的设备已经非常稀少，即便是 1024 本身，主流的设备也是平板而不是一般的 PC 电脑。当这些设备的数量低到成为绝对的非主流时，是可以选择忽略它们，以满足更多人的需要。
所以通常，我们最低支持的分辨率，不是 1024×768 就是 1280×800。如果大家不相信，可以去各类网站中，用 QQ 截图工具量一下主要内容区域的宽度，很难出现大于这两个数值的情况。
2. 展示类型
展示类型，也只有两点，即宽度适应屏幕，或者是定宽。
先说说第一种，可能有不少人已经听过响应式布局和自适应设计的大名，先不论它们有什么区别，它们代表了网页显示内容随浏览器窗口尺寸变化而变化的技术，比如使用 Bootstrap 架构的星巴克官网，更改浏览器窗口宽度后，可以得到以下不同的结果。
如果你现在还需要通过这篇内容学习网页宽度制定的情况下，我是不建议在真实项目中使用这种展示类型的。因为它们都需要对前端架构有一定的熟悉，以及对 CSS 的属性特性有基本认识，否则就无法在设计过程中直接考虑到其它分辨率下显示的效果，以及制定不同元素的自适应方式。
响应式设计的规则非常灵活，会受到更多因素的影响，完整的响应式界面设计会如上图所示，提供多种尺寸的设计图。常见的如 1920、1080、640 宽。
如果是定宽的设计，那么就回到前面所说，我们只需要以适配 1280 或 1024 的屏幕展开设计即可。但是，网页的实际内容区域，和我们要适配的范围是不同的。
在浏览器中，首先有右侧滚动条的因素影响，并且主体内容的两侧也要预留出内边距。
所以，我们真正创建的网页内容区域，是小于 1280 或者 1024 的。而得出具体的内容区域尺寸的方法，是通过网页的删格系统计算出来的。
网页删格系统是由平面网格系统衍生出来，针对网页使用的排版系统。如果稍微看过这类文章的同学都会看见一个公式：
（Axn）- i = W
这个做法就是通过将内容区域划分成若干内容块和间隔模块的方式，辅助我们排版。在本篇内容里不做具体介绍，只需要关注结果即可。
如果选择适配 1280，那么设计内容的区域宽通常为 1180、1190。而在适配 1024 下，那么内容区域宽常见的就有 950、970、990 等。当我们创建完完整分辨率的画布，再通过参考线的方式将内容区域规划出来即可。
对于网页设计来说，最重要的参数就是内容区域的宽度，但也有一些元素是例外，很多人可能发现网页有一些元素是超过正常的内容区域的（无论是对一般显示模式或是自适应模式），最常见的就是顶部的导航栏和底部的页脚区域。比如打开淘宝无论拉伸得多长，内容区域固定是 1190 宽，而导航栏却永远撑满整个浏览器。
所以，我们不会将这些内容的宽度计算在内，在设计稿中只要设计了这样的元素，和前端人员适当沟通和标注，就可以获得想要的效果。
总结
其实讲了一堆，最后我们用一个表格来总结一下。
关于 PC 端网页设计宽度的设定介绍到这里就结束了，如果有什么疑问，可以在评论区留言。
于在CSS中实现容器的长宽比最初的创意是来自于在Web中如何实现纵横比。主要是用于响应式设计中的iframe、img和video之类的元素。随之扩展为适用于任何容器的长宽比。那在CSS中到底有多少种方案可以实现呢？我一向喜欢做这样的事情，到处搜集多种解决方案。
如果你看到前面的两篇文章，或许你知道一些方法，或者说所有的方案你都想到了。如果是这样的话，你可以停止阅读这篇。如果没有的话，你可以继续往下阅读。
长宽比在影视制作中又被称之为宽高比，指的是一个视频的宽度除以它的高度所得到的比例，通常表示为x:y或x×y，其中的冒号和叉号表示中文的“比”之意。目前，在电影工业中最常被使用的是anamorphic比例（即2.39:1）。传统的4:3仍然被使用于现今的许多电视画面上，而它成功的后继规格16:9则被用于高清晰度电视或数字电视上。常见的比例：
使用CSS实现容器长宽比，常见的HTML模板结构有两种：
<div class="aspectration" data-ratio="16:9">
<div class="content"></div>
</div>另外一种结构是：
<div class="aspectration" data-ratio="16:9"> </div>具体使用的时候，根据自己的使用场景采用不同的结构。
前面也提到过了，使用CSS实现长宽比方案有多种，下面简单的罗列一下这些方案。不过每种方案都不会详细介绍，因为代码非常简单，看一眼代码就能明白其中原理。
这是最早提出的一种实现方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好地实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。
比如我们容器的长宽比是16:9，那么根据比例计算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。
具体的CSS代码如下：
.aspectration {
position: relative; /*因为容器所有子元素需要绝对定位*/
height: 0; /*容器高度是由padding来控制，盒模型原理告诉你一切*/
width: 100%;
}
.aspectration[data-ratio="16:9"] {
padding-top: 56.25%;
}
.aspectration[data-ratio="4:3"]{
padding-top: 75%;
}通过通配符*选择器，让其子元素的宽高和容器.aspectration一样大小：
.aspectration > * {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}padding & calc()
这个方案采用的是padding和calc()配合在一起使用。其实原理和第一个方案是一样的。只不过在第一个方案中，我们每次都需要对padding的值进行计算，如果使用calc()可以通过浏览器直接计算出padding的百分比值。
.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}padding & CSS变量
对于变量而言，以前是其他计算器语言和CSS处理器的特性，不过值得特性的是，现在也是CSS的特性。接下来的这个方案也是基于padding原理，只不过是借助于CSS变量特性，让前面的方案变得更为灵活一些。使用CSS的变量时，可以把HTML中data-ratio去掉了。换成style="--aspect-ratio:16/9"，也可以是style="--aspect-ratio:1.4;"。同时也可以借助于第二个方案中的calc()。因为CSS的变量和calc()函数的结合是一种完美的结合。
.aspectration[style*="--aspect-ratio"] {
padding-top: calc(100% / (var(--aspect-ratio)));
}padding & 伪元素
前面的方案都是在.aspectration元素上使用padding值。但在CSS中，还可以使用CSS的伪元素::before或::after来撑开容器。
.aspectration {
position: relative;
}
.aspectration:after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
padding-top: 56.25%;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}CSS新特性中提供了一种新的单位vw。了解过这个单位的同学都知道，浏览器100vw表示的就是浏览器的视窗宽度(Viewport)。打个比方说，如果你的浏览器是1334px，那么对就的100vw = 1334px。这个时候也就是说1vw = 13.34px。这里的100vw也对应前面方案中的100%。这样我们就可以把前面的%单位换成vw的单位。打个比方说，16:9对应的就是100vw * 9 / 16 = 56.25vw。这个值可以用在padding-top或者padding-bottom中。但这里演示的不再是padding了，而是把这个值给height。
.aspectration[data-ratio="16:9"] {
width: 100vw;
height: 56.25vw;
}上面的示例中width的值是30vw,那么对应的height值就是30vw * 9 / 16 = 16.875vw。
这是一个很有创意的解决方案，使用的都是CSS新特性：视窗单位和CSS Grid Layout。简单说一下其中的实现原理：将容器.aspectration通过display:grid声明为一个网格容器，并且利用repeat()将容器划分为横向比例，比如16，那么每一格的宽度对应的就是100vw * 9 / 16 = 6.25vw。同样使用grid-auto-rows，将其设置的值和横向的值一样。在子元素上通过grid-column和grid-row按比例合并单元格。
.aspectration {
display: grid;
grid-template-columns: repeat(16, 6.25vw);
grid-auto-rows: 6.25vw;
}
.aspectration[data-ratio="16:9"] .content {
grid-column: span 16;
grid-row: span 9;
}在WICG的讨论上，有人提出来了原生的长宽比属性aspect-ratio。例如，给定一个容器元素它的width和height都设置为auto，并且aspect-ratio的值为2/1，max-height:200px。一个容器宽度为500px时，元素首先会设置width:500px，然后根据aspect-ratio比例将height设置为250px。这个时候其实违反了max-height的约束。相反，容器大小会变成height: 200px和width:400px。另外，如果元素的max-width是450px时，长宽比将会完全被忽视，因为无法满足。
如果把width设置为一个百分比，高度不设置一个固定值:
.aspectration[data-ratio="16:9"] {
width: 100%;
height: aspect-ratio(16/9);
}现在讨论讨论趋势是把aspect-ratio属性值变成属性，比如：
.aspectration[data-ratio="16:9"] {
width: 100%;
aspect-ratio: calc(16/9);
}到目前为止，还没有任何浏览器支持该属性，但我们可以借助PostCSS Aspect Ratio插件来实现上述的功能：
*请认真填写需求信息，我们会在24小时内与您取得联系。
