PC端网页尺寸设计一 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了36104字，被145人关注，获得了175个喜欢
PC端网页尺寸设计一
最近要写UI设计规范，先研究一下网页设计里的尺寸问题。一、分辨率网页设计的尺寸主要和两个因素有关，一个是电脑显示器的分辨率，还有浏览器的分辨率，其实还有一些操作系统，Windows或者Mac os或者其他的。什么叫分辨率呢，比如说的，就是横向有1024个像素，竖向有768个像素，整个屏幕可以看成是一个象棋盘，屏幕的尺寸是14寸还是15寸的，这个尺寸是不会变的，电脑是多大就是多大，变化的是电脑设置的分辨率，如果相同尺寸的屏幕，分辨率越大画面就越精细，比如我的电脑，如下图：
第一张，分辨率是800×600的，显而易见，图标变得特别大，特别模糊，第二张是的，看起来正合适，因为我的电脑分辨率就是这个，电脑是多少寸的就是指屏幕的对角线长度，再有，如果两台设备都是19寸的，16：9和4:3的屏也是不一样的，4:3的较大一些。在这普及一个小知识，寸和英寸的换算，英寸是英式的，寸是中式的，1英寸＝2.54厘米，1寸等于3.3厘米，1英寸＝0.762寸。二、有效可视区域当下比较流行的屏幕分辨率有66×768,80××900,，等。设计网页时要考虑好浏览器的分辨率，主流的浏览器有IE,谷歌，火狐，欧朋等。什么叫浏览器的有效可视区域呢，在我理解就是显示内容的地方，比如打开一个网页后，刨除浏览器的工具栏和侧边栏等，真正显示内容的地方，如下图：
我电脑里的浏览器是IE11，有效可视区域是画红框的部分，每个浏览器都有自己不同的有效可视区域，如下面的表格
（谷歌的是宽度减去23）800×600的已经不用考虑了，主流的是，现在主流的浏览器还是以IE为主，所以在设计网页的宽度的时候保守的还是考虑1003px,在的分辨率下，1003就是IE浏览器的有效可视区域的宽度，但是现在越来越多的宽屏正在逐渐占据市场，所以我个人建议使用1280或者1366的，有效可视区域按照IE的来计算，1280的就是的就是1345，如果遇到别的分辨率，可以做自适应的调整，现在越来越多的网页设计的宽度都不是固定不变的，这是一个流行的趋势，如下图：
第一张是我正常的全屏显示，第二张是我把浏览器的长宽调整了，设计时考虑三种情况，第一：固定网页尺寸，IT在设计的时候会按比例显示，缩小或者放大，第二：固定主要部分的尺寸，然后旁边留空，小的浏览器就放满，大的浏览器就留白比较多，第三：根据不同尺寸做不同设计方案，这种就比较麻烦了，现在主要是依据第二种，有一部分主要的是固定不变的，当分辨率变化的时候内容会跟着分辨率的宽度来变化，有时候设计的时候图标和图片也会随之而变，这需要前端在代码上作调整。三、主流浏览器的界面参数
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
分享当前主流的界面设计尺寸、主流平台的设计规范、主流APP的设计规范。
#投稿的文章，小编会根据您的文章阅读量推送到微信公众平台...
· 2863人关注
视觉/交互设计/用户体验/产品/技术相关
2015年5月-2016年4月UI设计师
2016年7月开始交互设计师职业生涯...
· 316人关注
· 33人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：可以适应所有尺寸的屏幕的网页设计方法
七彩知识堂
可以适应所有尺寸的屏幕的网页设计方法
　　可以适应所有尺寸的屏幕的网页设计方法
1、使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
首先解释该标签的含义：
&meta name=&viewport& content=&width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&/&
如果你完全不了解这个标签的使用需要先百度一下。
解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。
对于此标签还有以下需要分享：
1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。
2)、initial-scale=1.0
初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。
3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。
4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。
以上是使用viewport标签的一些小体会，分享给大家。
2、第二种自适应屏幕尺寸的方法是将页面做成980宽度，在没有viewport标签的情况下，移动设备屏幕范围会显示页面980的宽度，如果页面大于980，则在屏幕范围内显示页面一部分，如果页面小于980，则页面居中两侧显示空白，那么你猜，如果页面宽度等于980会出现什么情况呢？
3、百分比法，首先应明确一个概年，CSS中的百分比中的百指的是什么，我告诉你指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
4、使用css3单位rem，有人这样解释rem，root-em，就是根部的em，想必em大家都懂的，那么rem就是将根节点html的font-size的值作为整个页面的基准尺寸，默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时，1rem=20px，那么32px=1.6rem了。到这里我们也就了解了rem的用法了，那么怎么用rem来实现不同尺寸屏幕的自适应呢？在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者的差别请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，这样如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢？计算：div宽度dW2=dW1/100,px与rem之间很好换算，除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;
解释一下为什么把100作为一个缩放比例，用10或1不是更方便吗，这是因为大多数浏览器font-size的最小值为12px，所以只能用100了。
5、媒体查询，媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class=&icon&的元素设置样式，可以这样写，@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路，关于媒体查询的详细用法请参阅css手册。
综上，至今，我没有找到一种完全适应各种屏幕的方法，只能根据页面特点选择不同的方法。
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no&&
经典短信推荐查看: 8903|回复: 6
网页的尺寸是多少？
主题帖子积分
设计一个背景图在网页中，会出现留白的情况。
一般要将背景设计为多少可以不留白？
在21寸和14寸的显示器上将横坐标调制1260可以显示全屏并且没有滚动条出现；
但是在10寸的显示器上显示则会出现横向滚动条。
横坐标的尺寸多大时是最适合的？
axure有没有办法设置生成页面的大小，让所有显示器都可以兼容(不出现横向滚动条)。
有没有这方面的资料，可以看看网页尺寸方面信息。
主题帖子积分
这是设计师和web前端工程师的工作，不是axure的工作吧。。。
axure是原型设计而不是网页制作或开发。
按不同分辨率来设计不同尺寸，最好当然是自动适应，用相对尺寸了。
主题帖子积分
我也在纠结这个问题。
而且没办法让页面在浏览器中居中显示。 据说Axure6.5支持这个功能。期待中。
主题帖子积分
完全新人一枚
难不成还要axure做个像样的网页出来啊，框架和交互感觉出来就可以了吧。
主题帖子积分
不是有栅格么？现在的网页，门户站不都还是按照1024的分辨率做的么？最宽的类似京东的，也只有1280的。但是京东是做了两套页面的。1280一套，1024一套。类似卓越那样的布局，能够自适应宽度的，只有靠前端人员手写代码了。靠axure应该是实现不了的
主题帖子积分
主题帖子积分
因为现在显示器的尺寸都在向宽屏靠拢，所以网站的宽度，设计的时候也有这个趋势。就我目前看到的网站，貌似自适应的不是很多，即便有，总归不是那么的完善。亚马逊的技术很牛，这一点走在了前列。可是如果要定义网站尺寸的话，基本参考显示器尺寸加上栅格原理定就好了
联系管理员尹广磊的邮
Powered by网页设计中设置多大宽度的页面最合适？
[ 时间： 16:11 &&
& & & 随着手机，ipad的出现和普遍，再加上PC端显示器分辨率越来越大，网页的宽度成为了具有争议性的一个话题，那么，选择多少像素的宽度比较合适呢？
& & & 淘宝与京东页面宽度
& & & 我们先来看淘宝网站的宽度，淘宝在2013年的时候，网站宽度还保持在960px，直到2014年新年进行了改版，宽度由以前的960px变为了1000px，直到现在，淘宝为了满足更高分辨的显示器，采用了响应式设计，网站宽度新增加1190px的版本，淘宝目前在PC端可以满足1000px以上的分辨率，同时1190px版本的又能在更高像素的显示器上完美呈现，不至于显得网站过窄！
& & & &京东的页面设计并没有采用响应式设计，而是直接将1284px以下和1280以上各做了一个版本，也就是有2套版本网站，这2套版本的内容完全一样，只在间距和图片的尺寸上有区别，用户不去深究是不会察觉到的。那么问题来了，企业站应该设计多大的宽度最合适呢？
& & & &企业网站的宽度多少为最佳？
& & & &无论是淘宝的响应式还是京东的2种页面版本，都是需要更高的资金投入，而在经济条件不允许的条件下，企业没办法选择任何他们之中的任何一个设计方案，因此，网站的宽度就需要选择一个折中的办法，才能满足不同分辨率终端。
& & & &上图是来自CNZZ今年8月份的数据，从图中可以看出，占比达到10%以上的分辨率分别为：40x900， 20x1080 这4种，也就是说，为了能在这4种主流浏览器上使网站展示正常，网站宽度设置应低于1024px，虽然1024px以下宽度的页面在分辨率的显示器上显示的会有些偏窄，但是总好过采用更大宽度的设计却不能在1024分辨率上正常显示要好得多。再考虑页面排版与一般网站两边留白的视觉效果，网站宽度设计为1000px的为佳。
& & & &当然，我们更欢迎喜欢高品质网站的客户，响应式网站的趋势会越来越强，在未来多终端设备上，占有绝对优势！}