移动端解决自适应和多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

其实H5适配的方案有很多种，网上有关于这方面的教程也非常的多。

不管哪种方法，都有其自己的优势和劣势。

为什么推荐使用Flexible库来做H5页面的终端设备适配呢？原理简单易懂源码疑问

主要因为这个库在手淘已经使用了近一年，而且已达到了较为稳定的状态。

除此之外，你不需要考虑如何对元素进行折算，可以根据对应的视觉稿，直接切入。

该方案会自动根据你的屏幕大小配置好根节点的 font-size 大小

另外会改变 initial-scale , 如果是3倍retina屏, 值变成 1/3, viewPort被放大为3倍

书写的时候可以用直接写 px, cssrem插件会帮你转成rem, 这样就不会影响开发效率

对应@3dpr 的图, 可以用 data-dpr 判断

[data-dpr="3"] & {background-image: url("../img/@3x/android.png?v=@@version");}

对于字体:

@mixin font-dpr($font-size){font-size: $font-size;[data-dpr="2"] & {font-size: $font-size * 2;}[data-dpr="3"] & {font-size: $font-size * 3;}
}

过程

dpr问题

https://github.com/amfe/article/issues/17

http://www.cnblogs.com/lyzg/p/5058356.html

转载于:https://www.cnblogs.com/dhsz/p/6404519.html

移动端解决自适应和多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible相关推荐

当我们在讨论设备像素比（device pixel ratio，dpr）的时候我们在讨论什么？
目录 0. 为什么要写这篇文章? 1. 设备像素比的问题在哪里? 1.1. 不同的论述导致不同的理解 1.2. 设备独立像素与CSS像素 1.3. 小结 2. 设备像素比 = 设备物理像素/CSS像素 ...
手机淘宝——flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...
淘宝H5移动端解决方案
由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题.建议大家开始使用viewport来替代此方案.vw ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
java 服务端解决ajax跨域问题
java 服务端解决ajax跨域问题参考文章: (1)java 服务端解决ajax跨域问题 (2)https://www.cnblogs.com/fx2008/p/4024971.html (3)h ...
解决minicom串口被锁Device /dev/ttyS? is locked
解决minicom串口被锁Device /dev/ttyS? is locked 最简单直接的方法,重启ubuntu.H^ 解决措施: ls /var/lock 会出现 LCK-ttyS? subsy ...
vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript
HTML5期末大作业:茶页文化网站设计--气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 ...

移动端解决自适应和多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

移动端解决自适应和多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible相关推荐

最新文章

热门文章

移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible相关推荐

最新文章

热门文章

移动端解决自适应和多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

移动端解决自适应和多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible相关推荐