pc端网页的设计尺寸

本文介绍了作者在实际项目中使用的PC端网页设计尺寸方案。针对全屏页面采用1920*960px的设计图,并通过JavaScript动态调整元素尺寸以实现响应式布局。对于非全屏页面,则推荐使用固定宽度如1170px。
摘要由CSDN通过智能技术生成

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

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

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

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

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

原理如下:

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

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

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

参考网站:http://bsk.highset.cn/ (可以将浏览器缩小后刷新页面查看)

如果不做全屏,或者严格讲主要区域不做全屏设置,可以固定中宽,比如bootstrap的container的固定宽度1170px(大于1200px一致设置为1170px)。

转载于:https://www.cnblogs.com/haley168/p/pcSize.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值