随着越来越多的终端设备可以连上互联网,可以浏览网页,一个好的网站便不再只是能够兼容不同的浏览器就可以了,还需要兼容不同的设备,于是
响应式网站的概念便应运而生了。
那么如何开发响应式网站呢?
在不断地实践中,我总结了如下几个高效开发响应式网站的基本点:
首先,了解实际分辨率(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。内容未经允许不得转载,或转载时需注明来源:
创新互联