设计制作响应式网站的常用分辨率尺寸

来源:EIdea编辑:eidea浏览量:1737
目前响应式网页已经成为当下主流的网站设计形式,因为现在的显示终端越来越多样化,哪怕你的企业在设计制作网站时为电脑和手机各制作一个网站也已无法满足这众多显示终端的展示需求了。所以不管是从节省制作成本还是提升用户浏览体验度的角度出发,响应式网站都是现时企业制作网站时的首选方案,而要想让网站能实现自适应各种不同尺寸显示终端的显示,就得先了解一下,目前主流的显示设备都有哪些分辨率。

首先说PC显示器(含主流尺寸笔记本电脑):

1024px * 768px

1280px * 800px

1366px * 768px

1440px * 900px

1600px * 900px

1920px * 1080px

2K分辨率2048×1080

4K分辨率4090×2160


其中 1024px * 768px 的分辨率正逐渐被淘汰, 而4K、2K超高分辨率的显示器目前毕竟还没普及,根据AdDuplex的统计数据来看,最主流的PC屏幕分辨率依然是 1366 x 768、1440 x 900 和 1920 x 1080 位居前三名。
显示器分辨率



其次是PAD类产品:

ipad1: 1024×768像素

ipad2: 1024x768像素

ipad3: 2048×1536像素

ipad4: 2048×1536像素

ipad air: 2048×1536像素

ipad air2: 2048×1536像素

ipad mini: 1024×768像素

ipad mini2: 2048×1536像素


IPAD分辨率

其中ipad1、ipad2、ipad mini均已淘汰,在制作网站布局时已基本可以不再考虑这些分辨率的产品了。


最后是智能手机:

在谈手机屏幕分辨率之前,我们要先了解一下手机屏幕的比例问题,也就是我们在日常使用中经常接触到 4:3、16:9、16:10、21:9这些比值,也就是分辨率中横向像素与竖向像素的比值 。4:3是我们最初所用的分辨率尺寸比,以前的电脑屏幕几乎都是4:3;随后宽屏显示器出现,16:10开始流行。

现在一些主流手机(偏旧)的分辨率为:720p(720×1280),1080p(1080×1920),2k(2560×1440)

手机分辨率
而在制作响应式网站布局又不仅是要考虑手机的分辨率,同时还要考虑手机的操作系统的问题,因为不同操作系统所配的浏览器对网页的解析会略有不同。

在我们了解了以上各种显示终端的屏幕分辨率后,在制作布局响应式网站时才可以针对不同的显示设备做相应的调试,以确保网站上线后能兼容各种显示终端显示。

响应式案例欣赏

逸林酒店

响应式企业官网建设

八爪鱼教育

响应式企业官网制作

宝亿莱软装设计

H5自适应企业官网