分享到

pc端页面设计图到底选择多大比较合适？

文字大小设置成什么样比较合适？

搞前端的都会遇到这些问题。

直接说说我在项目中的实现。

如果做全屏页面，我的设计图尺寸是1920*960px（960是chrome浏览器可视区域的尺寸），然后页面中所有关于尺寸相关的样式，全部用jq进行控制。

原理如下：

　　1.获取当前浏览器的可视区域宽度w，计算比例系数I=w/1920；

　　2.在分辨率1920*1080的显示器下将页面绘制完毕，然后将所有关于尺寸的数据乘以系数I。

效果：这样的页面就如同看一张图片一样，不论显示器多宽，模块间始终保持不变。

如果不做全屏，或者严格讲主要区域不做全屏设置，可以固定中宽，

比如bootstrap的container的固定宽度1170px（大于1200px一致设置为1170px）。

收获：

web端的规格

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

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

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