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

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


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


首先，了解实际分辨率（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代码书写的顺序

先初始化设置及处理元素，然后是事件处理，最后是窗口尺寸变化处理。

深圳网站建设 https://www.sz886.com/