手淘flexible.js框架使用和源代码讲解

【手淘flexible.js框架使用和源代码讲解】的更多相关文章

手淘flexible.js框架使用和源代码讲解

手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架. 其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了,首先我们来说一下常用的移动设备. iphone6: 375px*667px 实际像素:750px*1334px iphone5: 320px*568px 实际像素:640px*1136px iphone4: 320p…

通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

@media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } 其中all and可省略 @media print{ /*打印时设置的样式*/ body{ background:pink; } } 插曲: Lake Hill…

使用手淘flexible.js适配移动端布局

下载flexible: https://github.com/amfe/lib-flexible //未压缩版 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { do…

flexible.js框架改写

前一阶段拜读了阿里团队的flexible.js,但是flexible的封装感觉还是不完美,因为flexible还是要依赖less/sass之类的编译执行,所以就存了一些问题,我把这些问题进行整理. 优点: 1.代码量明显减少 2.开发效率变高,css管理式开发,css逻辑清晰 3.less+flexible.js能否适配各种手机型号,实现各个尺寸屏幕的兼容 4.less学习成本低(几乎为零) 缺点: 1.less编译成css执行,团队开发git版本控制器的坑,这个不多说了 2.因为是less编译…

解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

例如这样然后这样出现这样的原因一般是静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); 这段代码是起主要作用的,但是这段代码是在页面初始化完毕才执行的(即把把其他引用的js文件下载好,并且里面的函数都…

更新手淘 flexible 布局 rem 单位适配问题

详见链接 https://github.com/amfe/lib-flexible…

vue 的rem 配置和flexible.js的应用

1.环境的配置: C:\Windows\System32\drivers\etc 2.多行注释: 光标放在函数中间,连按两次:“Ctrl+Alt+D”,就会出现以下的内容 3.总结使用过程:vue移动端flexible.js结合Muse-ui使用的小坑 1/px to rem 插件(vs code) 使用的时候选中 Alt + Z 2/安装步骤见链接: http://blog.csdn.net/zhanglong_web/article/details/78649717 http://blog.…