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

来源:Eidea编辑:xiemengdan浏览量:951

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


首先说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像素





其中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响应式网站

莱佛士教育学院

知名教育培训机构官网定制设计