资讯专栏INFORMATION COLUMN

RATIO.JS 移动端自适应方案

刘永祥 / 2476人阅读

摘要:已更新强力推荐移动端自适应解决方案与仿原生超高清超细腻解决方案新增了功能,开启了功能后,可以自动设置设备尺寸为物理分辨率使网页达到原生精细效果。

已更新 - 强力推荐 (移动端自适应解决方案与仿原生APP超高清超细腻解决方案)
https://gitlab.com/fekits/mc-...

v1.1.0 [Latest version]

1、新增了dpr功能,开启了DPR功能后,可以自动设置设备尺寸为物理分辨率使网页达到原生APP精细效果。就是解决经典的1px太粗问题

2、新增了fixed参数可以设置字号缩放时的小数字精度。

首先仍然先上DEMO,这个DEMO开启了DPR功能,请注意看1px线条粗细度与清晰度,因没有足够的老机型,目前并未发现DPR功能开启后有兼容问题,目前测试机有iphone5s,iphone6s,iphone7s Plus,iphone4,小米(未注意型号),魅族(未注意型号安卓4.4.4),如果您发现了任何题麻烦你剪屏联系我,谢谢!

http://www.junbo.name/plugins...

// 复制这一段放在HTML头部即可=========



// 写尺寸规则:所有尺寸写设计稿尺寸/100,比如设计稿宽600px写width:6rem,设计稿字号28px写fint-size:.28rem;// 复制这一段放在HTML头部即可=========

以下为v1.0.0版本

RATIO.JS使用简单复制粘帖即用。亮点:全屏模式可开启宽高双向自适应!

先看效果:http://junbo.name/plugins/ratio/ 建议打开调试台使用移动端模式查看,前端都懂的!

全屏页面使用示例:

// 复制这一段放在HTML头部即可=========

function ratio(i){var c=document.documentElement,l=i.el||c,o=i.size[0],s=i.size[1]/o,d=i.full,e=function(){var e,t=c.clientWidth,n=c.clientHeight;e=d&&n/t

滚动页面使用示例:

ratio({size: [750, 1334], full:0}); // full改成false或0或不写

gitlab网址:https://gitlab.com/fekits/mc-...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100889.html

相关文章

  • 移动端自适应布局方案

    摘要:背景现在工作中有超过一半的时间用于移动端项目的开发,包括嵌入页,微信页面和移动页。经过研究,我在公司的多个移动端项目使用了布局来解决移动端自适应布局的问题。简单的说它就是一个相对单位,布局是一个流行的解决移动端响应式布局的方案。 背景 现在工作中有超过一半的时间用于移动端项目的开发,包括app嵌入页,微信页面和移动wap页。 开发移动端页面跟开发PC页面的一个大区别就是移动端对响应式布...

    zacklee 评论0 收藏0
  • vw+rem移动端自适应布局

    摘要:本文同步发布于我的个人博客上移动端自适应布局不管是面试还是工作过程中,移动端的布局都比较常见,而移动端适配方法也是多种多样。表示当前视口宽度的百分之一。同时在移动端,的兼容性还不错,完全可以直接使用。这样完成了一个简单好用的移动端布局了 本文同步发布于我的个人博客上 - vw+rem移动端自适应布局 不管是面试还是工作过程中,移动端的布局都比较常见,而移动端适配方法也是多种多样。一般来...

    Little_XM 评论0 收藏0
  • 移动端自适应方案

    摘要:如何解决移动端的自适应问题主要是移动端的屏幕尺寸比较多,如何在各种屏幕宽度下显示的更好,更一致问题。用解决自适应的问题,是个非常精确的解决方案,能够将高度和宽度都做到随着屏幕的宽度完全的等比缩放,但是缺点就是开发起来效率低点。 1.背景知识 首先是看几篇文章,了解viewport scale dpr 图片的显示精度问题 一像素显示问题, 缩放导致的像素适应问题 移动端的自适应问题...

    Yi_Zhi_Yu 评论0 收藏0

发表评论

0条评论

刘永祥

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<