下载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…

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

@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…

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

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

最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做的时候有两种解决办法: 一.UI设计尺寸定基数 可以和UI沟通在给你的标记尺寸大小时候,让她基于一个数值,一般是16px.给你标注的时候选择保留两个小数,给你标注成px或者rem. 开发者这时候需要配置开发者工具了,…

目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备.看看下图你就会知道,这是多么痛苦的一件事情: 再来看看手淘H5要适配的终端设备数据: 看到这些数据,是否死的心都有了,或者说为此捏了一把汗出来. 手淘团队适配协作模式 早期移动端开发,对于终端设备适配问题只属于Android系列,只不过很多设计师常常忽略An…

前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 安装lib-flexible.js npm install lib-flexible --save 在项目入口文件main.js中引入lib-flexible import 'lib-flexible/…

前言 看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘flexible的解决方案,实现了个简单的demo. 一句话总结 flexible动态获取设备宽度和dpr,为html元素添加两个属性:data-fontsize(设备宽度/10),data-dpr(安卓均为1,ios不同设备为2或3),同时设置meta标签的scale(1/dpr).你只需要为需要适配的元素设置…

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.…