开发响应式网站的几个基本点

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


随着越来越多的终端设备可以连上互联网,可以浏览网页,一个好的网站便不再只是能够兼容不同的浏览器就可以了,还需要兼容不同的设备,于是响应式网站的概念便应运而生了。





那么如何开发响应式网站呢?


在不断地实践中,我总结了如下几个高效开发响应式网站的基本点:


首先,了解实际分辨率(A)与逻辑分辨率(B)的关系:
B = A / devicePixelRatio(设备像素比)


那么,什么是devicePixelRatio?举例:
假设有2个设备D1、D2,它们的屏幕尺寸是一样大小的,D1的实际分辨率是2048*1536px,D2的实际分辨率是1024*768px,如果D2的devicePixelRatio = 1.0,那么D1的devicePixelRatio必然要等于2.0,不然在同样的尺寸下面,D1不可能达到2048*1536px的分辨率。


其次,了解面向移动APP以及网页设计的区别。


在设计APP的时候,采用的分辨率是设备实际的分辨率,因为APP是安装在设备上的,是封闭的,比如安装在手机上,我们不能通过PC去访问它。



而如果是网页设计,那么是跨设备,跨平台的,所以我们需要统一到逻辑分辨率这个角度去考虑。


1、全局处理触屏与非触屏的区分
这个主要是对鼠标效果与事件的处理。


2、全局考虑设备像素比
这个主要是对图片与字体的处理。


3、全局设计屏幕尺寸区间的划分
通常会划分为4个区间,小屏、中屏、大屏、超大屏,3个临界点的值一般是700多像素,900多像素,1200多像素。
另外需要注意的是,PC中浏览器窗口有滚动条,CSS中与JS中屏幕的宽度会有滚动条宽度之差。


4、CSS代码书写的顺序
小屏、中屏、大屏、超大屏,哪个作为标准,就先写哪个区间的代码。然后是区间尺寸从小到大依次书写。


5、JS代码书写的顺序
先初始化设置及处理元素,然后是事件处理,最后是窗口尺寸变化处理。

响应式案例欣赏

瑞纳蒂食品

高端H5创意型企业官网

爱企舞互动

响应式企业官网设计

蓉阿妈串串

响应式企业官网制作