前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html),受益良多,写了个小demo,记录一下以防忘记,需要注意几点,如下: 1. 将flexible_css.js,flexible.js文件加载到项目中 <script src="build/flexible_css.debug.js"></script>

flexible是淘宝提供的一套REM手机适配的库,用法也非常简单 首先,在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式),或者通过cdn方式引入 然后通过实际的px大小/根元素font-size的大小,就得到了rem的值,这里提供了一个sublime的cssrem的插件,可以快速将px转换成rem值, 插件地址https://github.com/flashlizi/cssrem 安装使用 安装 ● 下载本项目,比如:git clone ht

1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http://blog.csdn.net/u010377383/article/details/77963973 (Flexible实现手淘H5页面的rem布局适配) 3.http://blog.csdn.net/zhanglong_web/article/details/78649717 (vue移动端f

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

UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切图虽然简单,但还是有很多地方需要注意的,下面由tgideas的 LV主唱大人 跟大家讲讲原生App切图的那些事儿,对UI入门或需了解APP切图的设计师来说会有帮助哦. 如何切图? 了解iphone界面的尺寸 最小的分辨率是320×480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所

如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一般拿设备最高的分辨率作为设计稿的原始尺寸,拿iphone来说就是iphone5或5s的640x1136啦,当然也可以用iphone4或4s的640x960,因为宽度都是640px,他们切图的标准是一样的.显然,以1倍图的基准尺寸(宽320px)为相对的参考依据,宽640px的设计稿,以原始尺寸切出来

表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及应用 原文: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html 大漠的文章(简洁):https://github.com/amfe/article/issues/17 giuhub:https://github.com/

作者 | 黄玉奇(徙远)  阿里巴巴高级技术专家 关注"阿里巴巴云原生"公众号,回复关键词 1219 即可下载本文 PPT 及实操演示视频. 导读:伴随 5G.IoT 的发展,边缘计算正在成为云计算的新边界,而规模和复杂度的日益提升对边缘计算的效率.可靠性.资源利用率等一系列能力又提出了新的诉求.试想,如果能将云能力从中心往边缘触达,上述问题是不是将迎刃而解?在云原生时代构建云到边的触达通路,保持云边一致性体验,我们的抓手又在哪里呢?本文将一一为你揭晓. 云原生的理念现今正如火如荼.它

Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么Vant如何使用(以下操作都是基于vue-cli3) 1.如何自动按需引入组件? <1>安装插件:npm i babel-plugin-import -D babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入 <2>

点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 作者 | 杨育兵(沈陵) 阿里巴巴高级技术专家 我们从 2016 年开始在集团推广全面的镜像化容器化,今年是集团全面镜像化容器化后的第 4 个 双11,PouchContainer 容器技术已经成为集团所有在线应用运行的运行时底座和运维载体,每年 双11 都有超过百万的 PouchContainer 容器同时在线,提供电商和所有相关的在线应用平稳运行的载体,保障大促购物体验的顺滑. 我们通过 PouchContainer 容器运行时

前言 这里大部分是自己遇到过的情况,还有一部分借鉴了同行的文章,如果大家有遇到其它坑,欢迎提出来一起研究. 知识要点 1. Meta标签 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1:1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 2.禁止ios上自动识别电话 &l

刚开始接触UI的时候,碰到的最多的就是尺寸问题,今天我们就来谈谈IOS和Android 图标设计尺寸吧! 一.IOS篇 1.iOS app图标的圆角半径是多少? (注:现在IOS图标是不需要再画圆角了,直接方形就OK) 比较精确和接近的圆角半径和图标尺寸如下:最右边表示圆角半径 Icon1024.png – 1024px -圆角半径: 180px Icon512.png –    512px    - 圆角半径:89.825px Icon.png     –  57px      -圆角半径:

整理目前流行的跨平台WebApp开发技术的特点,仅供参考. 每个框架几乎都包含以下特性: 使用 HTML5 + CSS + JavaScript 开发 跨平台重用代码 丰富的UI库 提供访问设备原生API的 JavaScript API 包装器 解决原生开发中机型适配的难题 提供打包.部署的工具或服务 都需要学习自身封装的 JavaScript API 筛选框架的要求: 性能:运行速度快 UI:提供接近原生的UI体验 插件多,文档丰富,开发效率高,容易扩展和维护 满足业务需求 Cordova C

原文地址:https://www.cnblogs.com/songxingzheng/p/6482697.html 整理目前流行的跨平台WebApp开发技术的特点,仅供参考. 每个框架几乎都包含以下特性: 使用 HTML5 + CSS + JavaScript 开发 跨平台重用代码 丰富的UI库 提供访问设备原生API的 JavaScript API 包装器 解决原生开发中机型适配的难题 提供打包.部署的工具或服务 都需要学习自身封装的 JavaScript API 筛选框架的要求: 性能:运行

一.实现的效果图 二.实现思路 中间想过很多实现方法,但是因为input为原生组件的原因,很难适配所有手机直接. 所有如何实现适配所有手机的验证码分离输入呢?(思路如下) 1.input组件为原生组件会造成适配问题,所以我们换个思路,如果能直接不用input组件不就没有这个问题了,但是并不是真的不用input,而是让input看不到 2.方法就是给input一个className,使它width:0;height:0;,然后让输入框focus={true},通过OnInput方法的e然后e.de

code小生 一个专注大前端领域的技术平台 公众号回复Android加入安卓技术群 镇楼 2017 文章合集 2017 年度文章分类整理 下面是 2018 年公众号所发表的文章分类整理 面经 一年经验 Android 面试记录 记自己 2018 年三月份的面试经历 怎样在 Android 面试中聊聊多线程 2018 Android ;面试心得,已拿到 offer 从技术面试官的角度谈谈简历和面试那些事儿 Android开发面试经-常见面试官提问Android题 蚂蚁金服面试经历-临场发挥 OPP

react+flexible适配布局 (1)npm i lib-flexible --save (2)npm i postcss-px2rem --save (3)在 node_modules/react-scripts/config/webpack.config.js 下做如下配置 const px2rem = require('postcss-px2rem');  px2rem({ remUnit: 75 }) // px2rem({ remUnit: 75 }) 的意思就是1rem = 7

T 摘要 · 云原生与数据湖是当今大数据领域最热的 2 个话题,本文着重从为什么传统数仓 无法满足业务需求? 为何需要建设数据湖?数据湖整体技术架构.Apache Hudi 存储模式与视图.如何解决冷数据频繁更新.如何在数据湖上进行准实时 分析.数据湖上调度为何选型 Apache DolphinScheduler.二次开发新特性以及规划等多个角度进行了阐述. 讲师介绍 杨华,T3 出行大数据平台负责人.Apache Hudi Committer & PMC.Apache Kylin Commit

拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细的开发实施之前,我们要先了解一些基本概念. 一些基本概念 在进行具体实战之前,首先得了解下面这些基本概念(术语): 视窗 viewport 简单的理解,viewport是严格等于浏览器的窗口.在桌面浏览器中,viewport就是浏览器窗口的宽度高度.但在移动端设备上就有点复杂. 移动端的viewpo

lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script> 将代码中的{{version}}换成对应的版本号0.3.4. flexib