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

基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible 在项目入口文件 main.js 中添加如下代码,引入 flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem 安装 px2rem-loader npm install px2rem-loa…

前置知识:什么是rem CSS3新增的一个相对单位rem(root em,根em).rem是相对于根节点(或者是html节点).如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px. 前置知识:什么是dpr 在浏览器控制台中输入 window.devicePixelRatio 可以获取当前设备的dpr 那么什么是dpr? dpr就是设备物理像素与逻辑像素(css像素)的比例. 那么设备物理像素是固定的,比如macbook pro 13.3寸是显…

在云栖大会上,马云提出五个“新”,新零售.新制造.新金融.新技术和新能源,称将对各行各业造成巨大的影响,成为决定未来成败的关键.而五个新的实现,也必须是各行各业共同推进,整个生态共同受益的结果.继10月14号阿里巴巴资深总监庄卓然宣布手淘技术核心之一的Atlas即将开源之后,淘宝移动平台基础平台部负责人吴志华向业界公布了手淘技术核心“三大容器五大方案”,后续阿里百川将会承接手淘核心技术,产品化的向业界开放.在10月15日的“淘宝移动技术实践&开放”专场中,阿里百川就宣布,正式公测百川码力APM,…

因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几种适配方法. rpx适配 rpx是小程序中的尺寸单位,它有以下特征: 小程序的屏幕宽固定为750rpx(即750个物理像素),在所有设备上都是如此 1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度(单位px),例如iphone6的screenWi…

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

方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果. function adaptor(){ //为了便于计算,这里以1920px为基准 let width = document.body.clientWidth let fontSize = document.getElementsByTagName('html')[0].style.fontSize = width / 19.2 + "px"; } ada…

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

rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 rem 为单位的值: 设计稿中的字体使用 px 为单位,通过媒体查询稍作调整. 1 动态设置 html 标签 font-size 大小 精简通用版本: !(function(win, doc){ function setFontSize() { // 获取window 宽度 // zepto实现 $(w…

什么是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的大小相当于…