用rem实现h5页面的编写
一 静态页面的布局
将这段代码加到script中
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 375) { //750这个值,根据设计师的psd宽度来修改,是多少就写多少,现在手机端一般是750px的设计稿,如果设计师给的1920的psd,自己用Photoshop等比例缩小
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'; //750这个值,根据设计师的psd宽度来修改,是多少就写多少,现在手机端一般是750px的设计稿,如果设计师给的1920的psd,自己用Photoshop等比例缩小
}
}; if (!doc.addEventListener) return;
//浏览器宽度高度变化的时候
win.addEventListener(resizeEvt, recalc, false);
//浏览器开始渲染的时候
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
设计图中某个元素的尺寸是200px那么计算rem就是200/100=2rem
二 页面的动态效果
一般也就直接用插件了,一般用这个就可以了:http://www.swiper.com.cn/
三 页面中数据的交互
一般移动端页面的交互和pc端的是一样的获取的ajax 就可以了
四 rem在实际中应用的时候,需要完善一下:
直接应用上面那种会出现在安卓的时候正常显示,在苹果手机显示的时候是文字是非常小的
这是dpr的原因,ios的有的是2倍屏,3倍屏,所以会造成“比Android”看起来小的原因,解决策略
(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;
var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) {
//console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
} if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
} docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
} function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 750) {
width = 750 * dpr;
}
var rem = width / 750 * 100; // 设计图 750
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
} win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false); if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem(); flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
写了一个demo的地址:https://github.com/GainLoss/Mobile
用rem实现h5页面的编写的更多相关文章
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 编写第一个H5页面
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第 ...
- 使用Flexible实现手淘H5页面的终端适配【转】
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 使用Flexible实现手淘H5页面的终端适配(转)
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- (转)使用Flexible实现手淘H5页面的终端适配
原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...
- 移动端 H5 页面注意事项
1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有 微信.QQ 等. ...
- [转]使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
- 如何将原生微信小程序页面改成原生VUE框架的H5页面
项目背景: 公司为了实现小程序与H5页面共同覆盖,全面推广.特此想将已有的小程序进行快速改造上线(二周内),研发出H5版本.目前公司前端技术较为薄弱,现有的技术解决方案还停留在JSP. 问题: 如何将 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
随机推荐
- 给WPF的MessageBox启用视觉样式
WPF的MessageBox为什么会这样 我的一个同学跟我说:“WPF不是新一代技术吗?怎么连MessageBox都没WinForm 的好看?” 上图是Windows Forms 的MesssageB ...
- 学习笔记:首次进行JUnit+Ant构建自动的单元测试(二)
关键字:JUnit,Ant,单元测试 终于把JUnit+Ant构建单元测试的大概了解了,其实我实践的过程是对了,只是指导博客(看到这里不懂请看我上一篇博客)本身的错误“成功”把我带入“坑”,有时候网友 ...
- 796D(bfs)
题目链接: http://codeforces.com/problemset/problem/796/D 题意: 给出一颗 n 个节点树, 树枝连接的两个定点距离为 1, 树中有 k 个特殊点, 问最 ...
- 1、SpringMVC架构
1.SpringMVC架构 1.1 Spring web mvc 介绍 spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中 ...
- python编译环境安装指南
windows系统先安装python解释器: windows版本exe安装文件下载地址:https://www.python.org/ftp/python/2.7.12/python-2.7.12.m ...
- [APIO2019T1]奇怪装置
考古学家发现古代文明留下了一种奇怪的装置.该装置包含两个屏幕,分别显示两个整数x和y.经过研究,科学家对该装置得出了一个结论:该装置是一个特殊的时钟,它从过去的某个时间点开始测量经过的时刻数t,但该装 ...
- centos7安装配置docker
1. 安装/升级Docker客户端 Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . uname -r 从 ...
- Oracle中慎用Like等通配符
Like关键字,从技术上来说,是一个非常友善的通配符.利用这个通配符,我们可以实现很多模糊查询.如现在在一个人事档案系统中,用户想知道身份证号码以“339005”开头的人事信息,此时,就可以利用Lik ...
- webpack配置Jquery全局包及全局包插件
一:在配置文件配置: plugins: [ //将来以template为模版,生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWe ...
- Codeforces Round #565 (Div. 3) B. Merge it!
链接: https://codeforces.com/contest/1176/problem/B 题意: You are given an array a consisting of n integ ...