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

2018-03-14 分类：响应式网站

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

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

首先，了解实际分辨率（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.cdcxhl.com/

分享文章：开发响应式网站的几个基本点
分享网址：https://www.cdcxhl.com/news/77173.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有响应式网站等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容