H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案
https://segmentfault.com/a/1190000011586301
https://juejin.im/post/5cbdee71f265da03b57b5866
https://www.jianshu.com/p/2e20f868f385
https://github.com/BoleLee/mobile-web-pagefit
https://segmentfault.com/a/1190000008767416
https://juejin.im/post/5b6503dee51d45191e0d30d2
dpr
let dpr = window.devicePixelRatio;
// device Pixel Ratio
// 设备像素比率
rem
https://www.w3cplus.com/mobile/vw-layout-in-vue.html
vw
vh
rem bug
srcset
js 动态设置根字体
px-to-rem.js
//适配不同尺寸
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// default 16px = 1rem; => 1px = 1/16rem (0.0625rem);
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
// 750px PS & customized 100px = 1rem; => 1px = 1/100rem(0.01rem);
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
Device Metrics
Material Design
https://material.io/tools/devices/
H5 APP 页面移动端适配方案的更多相关文章
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- H5 App页面 绝对定位 软键盘弹出时顶起底部按钮
做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...
- 整理h5移动端适配方案
<使用Flexible实现手淘H5页面的终端适配>:https://github.com/amfe/article/issues/17 <再聊移动端页面的适配>:https:/ ...
- h5 移动端适配方案思考
基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- vivo官网APP全机型UI适配方案
vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
随机推荐
- (Sql Server)存储过程(转载)
SQL Server 存储过程 Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这 ...
- 1.4.1 对象与JSON转化 1.4.2 JSON与List集合转化 1.1.1 获取json中的属性 day10-05
1.1.1 对象与JSON转化 @Test public void toJSON() throws IOException{ Jedis jedis = new Jedis("192.168 ...
- the minimum number of bits required to represent x 最小位数
src/math/bits/bits.go:296 // --- Len ---// Len returns the minimum number of bits required to repres ...
- UML 博客学习 后续继续完善
http://blog.csdn.net/monkey_d_meng/article/details/6005764 http://blog.csdn.net/badobad/article/det ...
- LOJ10069 TREE
题目描述 原题来自:2012 年国家集训队互测 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有 need 条白色边的生成树.题目保证有解. 输入格式 第一行 V,E,need 分 ...
- HDU1814和平委员会
题目大意: 有n对的人,编号从1-2*n,m对的人之间互相不喜欢,每对人中必徐选1个人加入和平委员会,求字典序最小的解 -------------------------------- 2-SAT问题 ...
- 基于粒子群算法的分组背包MATLAB实现
抽空看了一段时间的粒子群算法,这里仅针对其应用于动态规划中的背包问题的情况做下总结归纳,其他应用可以之后想到了再添加. 一:分组背包问题简介 假设有3个组,每组有2个物品,每种物品有3种属性,价值.体 ...
- Vue结合Element UI实战
创建工程 1. 创建一个名为hello-vue的工程 vue init webpack hello-vue 2. 安装依赖 需要安装 vue-router.element-ui.sass-loader ...
- HanLP 下载和配置
方式一.Maven 为了方便用户,特提供内置了数据包的Portable版,只需在pom.xml加入: <dependency> <groupId>com.hankcs</ ...
- Gym - 102062A、B、C、D、E、F、G、H
比赛链接:https://vjudge.net/contest/409725#problem 题面点此处进入 Gym - 102062A 题意: 就是说比赛一共发a+b+c+d个牌子,现在不带上主人公 ...