根据网上找到的解决办法,对于安卓设备,把dpr=1改为当前设备的dpr if (!dpr && !scale) { if (isIPhone) { // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2…

flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,f…

如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewport('视口'),就是这段代码<meta name="viewport" content="width=device-width,initial-scale=1.0">,因为flexible是通过js动态改变meta标签,类似代码如下: var metaE…

一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档. (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js" >…

var html = document.querySelector('html'); changeRem(); window.addEventListener('resize', changeRem); function changeRem() { var width = html.getBoundingClientRect().width; html.style.fontSize = width / + 'px'; }…

什么是flexible.js 移动端自适应方案 https://www.jianshu.com/p/04efb4a1d2f8 什么是rem 这个单位代表根元素的 font-size 大小(例如 元素的font-size).当用在根元素的font-size上面时 ,它代表了它的初始值(译者注:默认的初始值是html的默认的font-size大小,比如当未在根元素上面设置font-size大小的时候,此时的1rem==1em,当设置font-size=2rem的时候,就使得页面中1rem的大小相当于…

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现. 从手写不同尺寸的媒体查询css到以手淘的flexible.js来进行移动端的适配,虽然过程曲折,不过效果也是十分的显著,因为有了成熟的体系以后.什么东西就有据可寻,适配也就没那么困难了. 但是,因为这次引入了高德地图,所以在适配上出现了一点意料之外的问题. 首…

引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的一种移动端适配方案,用来解决H5开发中的各个机型适配问题,是一种比较成熟的适配方案. 二.使用方法: 在html头部引入flexible.js,最好放在最头部,重构时使用rem替代px像素即可,flexible会做好所有适配.换算关系为1rem对应1/10设计尺寸,如ipone6设计尺寸为750px…

前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案,尽可能地让这种“意外”减到最少.没错今天的主角就是它“flexible.js” . flexible.js 之旅 flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,如入无人之境.说得那么浮,一点感觉都没有.不急,我们慢慢来,一步一步走进 flexible.js 神秘的世界. fl…

;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid;…

这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不正确. 字体明明设置的是34px;computed完成之后偏偏显示的是38.44px;比实际大了不少,并且查找了好多资料页没解决问题, 后来看了下别人的例子,像下边这样写就会显示正确. , 加了max-height: 100%; display: block;这2个属性突然就好了.测试了下发现,只要…

npm install lib-flexible --save npm install px2rem-loader --save-dev…

http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作.关键代码如下: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc…

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

移动端适配,目前自己常用的两种 方案,参考以下两篇好文 方案一:使用lib-flexible包 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包 npm install --save-dev lib-flexible px2rem-loader 在需要的js文件中头部引入,如果是vue项目就引入到main.js中: im…

1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制 比如:根元素(html )设置的 font-size=12px:非根元素设置 width:2rem:则换成px 表示 24px(12px*2rem) 2. 媒体查询(@media) @media 可以针对不同的屏幕尺寸设置不同的样…

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

通过命令行 node -v 查看是否安装node环境 在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 vue -V 查看版本号验证是否安装成功 通过vue-cli 初始化vue项目 输入命令行新建 vue-demo 项目 vue init webpack vue-demo(项目名) 然后就可以一路回车键了 $ vue init webpack vue-demo ? Project name (vue…

因为公司有个项目有webapp的需求,在前期准备的期间考虑过使用ionic,毕竟该项目web端的框架使用的是Angular,项目组的人也都比较熟悉,但是我们毕竟只是做个移动的网页,不想用ionic那么繁琐的东西,最终我还是选了vue.   开始的设想是vue+Muse-ui或者Mint-ui(各有优缺点)+flexible.js,在做到手机端兼容的同时结合ui框架让项目更好看些,然后就开始动手做!   这个时候需要说下flexible.js,阿里开源的移动端适配代码,很好用,不过也有他的缺点,比…

移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正在使用的适配方案. 这个适配方案是lib-flexible,在看这个源码的同时,我想先来回顾一下几个概念: 1.  viewport 在移动设备上,viewport是设备屏幕用来显示我们网页的那一块区域,或者说是浏览器(或者Hybird App内的webview)用来展示我们网页的那部分区域,vie…

阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作.关键代码如下: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport&quo…

因为公司有个项目需求,手机端的.之前就写了一个一样的项目,只不过是用原生的写的,心想刚写了个vue后台管理系统,何不也用vue写,所有就没有把之前的利用过来.那么问题来了,要让手机端自适应我们该怎么做呢. 可以用阿里的移动端适配代码flexible.js.首先在命令行输入 npm i lib-flexible --save 然后在全局配置文件main.js引入 import Vue from 'vue' import App from './App' import router from './…

第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入lib-flexible import 'lib-flexible/flexible.js' 三.在项目根目录的index.html 头部加入手机端适配的meta <meta name="viewport" content="width=device-width,initial…

1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手持设备: http://blog.csdn.net/seven1276/article/details/8211877 3. function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = new Array("Andr…

flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签. 当使用flexible.js的时候,引入百度联盟的广告代码,会发现广告的文字会异常小,因为本身自己项目文字字号是根据data-dpr来响应式判断显示不同大小的,而百度联盟广告的直接按默认那像素显示.经过层层试验发现,字体显示大小和页面缩放比例有关系,这里需要修改一下flexible.js的源码,如图 如图,把原来的scale=1/dpr改为sc…

1. 配置开发工具(sublime)插件      https://github.com/flashlizi/cssrem     注意: 只有在‘.css’后缀文件才能使用此插件功能   2. 在html结构head里引入flexible.js       https://github.com/amfe/lib-flexible/blob/master/src/flexible.js…

1.引入 阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 2.运行后会发现头部添加了dpr和fontsize属性 <html data-dpr="2"…

首先下载flexible.js和px2rem npm install px2rem-loader 对webpack进行配置.进入build文件夹对utils.js中的postcssLoader做如下修改 const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap, plugins: function () { return [ require('postcss-px2rem')…

一,flexible.js 的使用方式: (一),引用方式 1,引用cdn地址 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> 当前最新的版本是0.3.2. 2,下载flexible.js 等文件到项目指定目录下,然后在head中引入.建议对于js做内联处理,在所有资源加载之前执行这个js. 下面是淘宝的写法: <!…

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就…