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

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/news23/77173.html

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

广告

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

网站优化排名