代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度 计算html元素的font-size,使1rem等于100px,方便快速开发 开发时,一个div设计图宽度为89px,那么在css中我们可以这样书写:width:0.89rem; 如果是文字,我们也建议使用rem 对于iphone的r…

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html…

1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图.基础字体大小.图标宽高. 这样做的弊端很明显: 做出来的页面在各种手机端看起来的物理大小(高度)是一样的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大 如果要使高度能更好的适应各种…

移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible 12 // main.jsimport 'lib-flexible' 添加 meta 标签 在项目根目录的 index.html 中添加如下 meta 1 <meta name="viewport…

使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen and (min-width: 481px) { html { font-size:94%!important } } @media only screen and (min-width: 561px) { html { font-size:109%!important } } @media onl…

效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中 初始的rem配置 // 设置 rem 函数 functi…

因工作需要,及考虑成本因素,需要探索一套免费的移动端基于rtmp推流的直播解决方案,过程虽稍显曲折,但最终还是完成了目标.在这里将记录下来,以便日后查阅. 总体思路 移动端推流(RTMP) ---> 流媒体服务器 ---> web服务器 ---> 网页播放 移动端推流工具使用 Larixbroadcaster ,支持安卓和苹果,并且有提供SDK,方便集成与二次开发,app商店有载,https://softvelum.com/larix 流媒体服务器的搭建使用 nginx+rtmp 方案,…

视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"…

一.把px转换成rem方案 1.cssrem插件 2.css预处理器 3.rem-unit插件 4.px2rem插件 rem就是相对于根元素的font-size来做计算,设置好根结点字体大小,子节点用rem做单位,实现自适应. 二.动态改变字体大小方案 1.css方案之媒体查询 设置html的font-size @media screen and (min-width: 320px) { html {font-size: 14px;} } @media screen and (min-width…

由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径.然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带来的问题. rem 关于 rem 这个单位的介绍,在此就不赘述,有兴趣的同学可以阅读一丝的<响应式十日谈第一日:使用 rem 设置文字大小>,文章对 rem 进行了详细的介绍. 用途 在无线开发中,响应式布局尤为重要,先不说屏幕尺寸越来越多样化的 iPhone,单是安卓就有 N 多种尺寸要适配.…