公司网站制作网站建设页面宽度是多少

PC 端网站制作对于不少从事 UI 行业的新人来讲是一个充满未知的范围，对于如何进行基本的画布创建，规格设置，都处于两眼一抹黑的状况。虽然这是由于多数人没系统的学习 UI 常识，它并非一个适当的现象。

网站制作也需要从用户的体验角度出发，尤其是宽度低于一屏，其最基本的表现是浏览器不出现横向滚动条。深圳网站建设公司大腕互联专注网站制作，网站制作等网站建设服务。

960像数这个神奇的数字出现之初，大伙各说纷纭，有说是由于苹果设计师在1024×768的分辨率下打开浏览器的宽度时974像数，减去浏览器的宽度本生的宽度14像数，这里这个神奇的960像数就如此出生了;也有些说在人眼不转动的状况下所能看到的大的宽度是960像数。我相信说这话的人真是无时不刻不在考虑客户体验啊

下面，大家会更新一些网站制作的干货，帮助更多 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 电脑。当这类设施的数目低到成为绝对的90后时，是可以选择忽视它们，以满足更多人的需要。

所以一般，大家最低支持的分辨率，不是 1024×768 就是 1280×800。假如大伙不相信，可以去各类网站中，用 QQ 截图工具量一下主要内容地区的宽度，非常难出现大于这两个数值的状况。

与门户类相比电子商务的改版更彻底了，大家来看下主流电子商务目前的页面宽度：京东1210像素、当当1200像素、1号店1200像素、新蛋1200像素、苏宁易购1190像素、易讯1225像素、亚马孙自适应(最小宽度980像素)。可以看出目前电子商务主流的网页设计是1200像素。

先来剖析下那个年代主流大户到了现在的页面宽度就5到6年前可能更早(下文中姑且说5年前)，大伙讨论网页设计宽度时基本都在950像素到1000像素之间，用960像数来设计为大部分网页设计人员同意，包含直到目前960PX还是指导着绝大多数门户类的设计。在那个时尚960像素的年代腾讯用的是910像素，而在今年腾讯的新首页已改版为1000像素。与腾讯同步的还有譬如凤凰网、新华网(在这里吐槽下新华网页面最外面的黑框)也是1000像素。搜狐、新浪依然是950像素，网易维持960像素。淘宝网首页1000像素(淘宝子频道页譬如：点卡950像素、男装990像素等各部相同)，淘宝系列新推的网站譬如：聚合算990像素、天猫970像素、天猫电器城990像素、一淘网1200像素。

与门户类相比电子商务的改版更彻底了，大家来看下主流电子商务目前的页面宽度：京东1210像素、当当1200像素、1号店1200像素、新蛋1200像素、苏宁易购1190像素、易讯1225像素、亚马孙自适应(最小宽度980像素)。可以看出目前电子商务主流的网页设计是1200像素。

2. 展示种类

展示种类，也只有两点，即宽度适应屏幕，或者是定宽。

先说说第一种，可能有不少人已经听过响应式布局和自适应设计的大名，先不论它们的不同之处，它们代表了网页显示内容随浏览器窗口尺寸变化而变化的技术，譬如用 Bootstrap 构造的星巴克官方网站，更改浏览器窗口宽度后，可以得到以下不一样的结果。

假如你目前还需要通过这篇内容学习网页宽度拟定的状况下，我是不主张在真实项目中用这种展示种类的。由于它们都需要对前端构造有肯定的熟知，与对 CSS 的属性特质有基本认识，不然就没办法在设计过程中直接考虑到其它分辨率下显示的成效，与拟定不同元素的自适应方法。

响应式设计的规则很灵活，会遭到更多原因的影响，完整的响应式界面设计会如上图所示，提供多种尺寸的设计图。容易见到的如 1920、1080、640 宽。

若是定宽的设计，那样就回到前面所说，大家仅需以适配 1280 或 1024 的屏幕展开设计即可。但，网页的实质内容地区，和大家要适配的范围是不一样的。

在浏览器中，第一有右边滚动条的原因影响，并且主体内容的两侧也要预留出内边距。

所以，大家真的创建的网页内容地区，是小于 1280 或者 1024 的。而得出具体的内容地区尺寸的办法，是通过网页的删格系统计算出来的。

网页删格系统是由平面网格系统衍生出来，针对网页用的排版系统。

假如选择适配 1280，那样设计内容的地区宽一般为 1180、1190。而在适配 1024 下，那样内容地区宽容易见到的就有 950、970、990 等。当大家创建完完整分辨率的画布，再通过参考线的方法将内容地区规划出来即可。

对于网站制作来讲，非常重要的参数就是内容地区的宽度，但也有一些元素是例外，不少人可能发现网页有一些元素是超越正常的内容地区的（无论是对一般显示模式或是自适应模式），最容易见到的就是顶部的导航栏和底部的页脚地区。譬如打开淘宝无论拉伸得多长，内容地区固定是 1190 宽，而导航栏却永远撑满整个浏览器。

所以，大家不会将这类内容的宽度计算在内，在设计稿中只须设计了如此的元素，和前端职员适合交流和标注，就能获得想要的成效。

目前名字：公司网站制作网站建设页面宽度是多少文章URL：https://www.cdcxhl.com/news/49720.html

网站制作、网络营销推广公司-博久网络，是专注品牌与成效的网站建设，网络推广营销网站优化公司；服务项目有网站制作、网站建设等