适配手机端rpx像素
- <script src="static/js/adaptive.js"></script>
- <script type="text/javascript">
- // 设计图宽度
- window['adaptive'].desinWidth = 750;
- // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' 750的设计图一般设置为28,640的设计图一般设置为24
- window['adaptive'].baseFont = 28;
- // 显示最大宽度 可选
- window['adaptive'].maxWidth = 750;
- // window['adaptive'].scaleType = 1;
- // rem值改变后执行方法 可选
- // window['adaptive'].setRemCallback = function () {
- // alert(1)
- // }
- // scaleType 1:iphone andriod下viewport均无缩放 2:iphone下viewport有缩放,andriod没有 3:iphone andriod下viewport均有缩放; 默认值为1
- // window['adaptive'].scaleType = 1
- // 初始化
- window['adaptive'].init();
- </script>
这是那个js文件。直接复制到你们指定的js文件夹中就了
- /*
- // 设计图宽度
- window['adaptive'].desinWidth = 750;
- // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' 750的设计图一般设置为28,640的设计图一般设置为24
- window['adaptive'].baseFont = 28;
- // 显示最大宽度 可选
- window['adaptive'].maxWidth = 750;
- // window['adaptive'].scaleType = 1;
- // rem值改变后执行方法 可选
- // window['adaptive'].setRemCallback = function () {
- // alert(1)
- // }
- // scaleType 1:iphone andriod下viewport均无缩放 2:iphone下viewport有缩放,andriod没有 3:iphone andriod下viewport均有缩放; 默认值为1
- // window['adaptive'].scaleType = 1
- // 初始化
- window['adaptive'].init();
- * */
- var adaptive = {};
- (function (win, lib) {
- var doc = win.document;
- var docEl = doc.documentElement;
- // 设备像素比
- var devicePixelRatio = win.devicePixelRatio;
- // 我们设置的布局视口与理想视口的像素比
- var dpr = 1;
- // viewport缩放值
- var scale = 1;
- // 设置viewport
- function setViewport() {
- // 判断IOS
- var isIPhone = /iphone/gi.test(win.navigator.appVersion);
- if (lib.scaleType === 2 && isIPhone || lib.scaleType === 3) {
- dpr = devicePixelRatio;
- }
- // window对象上增加一个属性,提供对外的布局视口与理想视口的值
- win.devicePixelRatioValue = dpr;
- // viewport缩放值,布局视口缩放后刚好显示成理想视口的宽度,页面就不会过长或过短了
- scale = 1 / dpr;
- // 获取已有的viewport
- var hasMetaEl = doc.querySelector('meta[name="viewport"]');
- var metaStr = 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
- if (dpr === 1) {
- metaStr = 'width=device-width, '.concat(metaStr);
- }
- if (!isIPhone && dpr !== 1) {
- metaStr = metaStr.concat(', target-densitydpi=device-dpi');
- }
- // 如果有,改变之
- if (hasMetaEl) {
- hasMetaEl.setAttribute('content', metaStr);
- }
- // 如果没有,添加之
- else {
- var metaEl = doc.createElement('meta');
- metaEl.setAttribute('name', 'viewport');
- metaEl.setAttribute('content', metaStr);
- if (docEl.firstElementChild) {
- docEl.firstElementChild.appendChild(metaEl);
- }
- else {
- var containDiv = doc.createElement('div');
- containDiv.appendChild(metaEl);
- docEl.appendChild(containDiv);
- }
- }
- }
- var newBase = 100;
- lib.errDpr = 1;
- function setRem() {
- // 布局视口
- // var layoutView = docEl.clientWidth; 也可以 获取布局视口的宽度
- var layoutView;
- if (lib.maxWidth) {
- layoutView = Math.min(docEl.getBoundingClientRect().width, lib.maxWidth * dpr);
- }
- else {
- layoutView = docEl.getBoundingClientRect().width;
- }
- // 为了计算方便,我们规定 1rem === 100px设计图像素,我们切图的时候就能快速转换
- // 有人问,为什么不让1rem === 1px设计像素呢?
- // 设计图一般是640或者750px
- // 布局视口一般是320到1440
- // 计算一个值,使layout的总宽度为 (desinWidth/100) rem
- // 那么有计算公式:layoutView / newBase = desinWidth / 100
- // newBase = 100 * layoutView / desinWidth
- // newBase = 介于50到200之间
- // 如果 1rem === 1px 设计像素,newBase就介于0.5到2之间,由于很多浏览器有最小12px限制,这个时候就不能自适应了
- newBase = 100 * layoutView / lib.desinWidth * (lib.errDpr || 1);
- docEl.style.fontSize = newBase + 'px';
- // rem基准值改变后,手动reflow一下,避免旋转手机后页面自适应问题
- doc.body&&(doc.body.style.fontSize = lib.baseFont / 100 + 'rem');
- // 重新设置rem后的回调方法
- lib.setRemCallback&&lib.setRemCallback();
- lib.newBase = newBase;
- }
- var tid;
- lib.desinWidth = 750;
- lib.baseFont = 28;
- // 局部刷新的时候部分chrome版本字体过大的问题
- lib.reflow = function() {
- docEl.clientWidth;
- };
- // 检查安卓下rem值是否显示正确
- function checkRem() {
- if (/android/ig.test(win.navigator.appVersion)) {
- var hideDiv = document.createElement('p');
- hideDiv.style.height = '1px';
- hideDiv.style.width = '2.5rem';
- hideDiv.style.visibility = 'hidden';
- document.body.appendChild(hideDiv);
- var now = hideDiv.offsetWidth;
- var right = lib.newBase * 2.5;
- if (Math.abs(right / now - 1) > 0.05) {
- lib.errDpr = right / now;
- setRem();
- }
- document.body.removeChild(hideDiv);
- }
- }
- lib.init = function () {
- // resize的时候重新设置rem基准值
- // 触发orientationchange 事件时也会触发resize,故不需要再添加此事件了
- win.addEventListener('resize', function () {
- clearTimeout(tid);
- tid = setTimeout(setRem, 300);
- }, false);
- // 浏览器缓存中读取时也需要重新设置rem基准值
- win.addEventListener('pageshow', function (e) {
- if (e.persisted) {
- clearTimeout(tid);
- tid = setTimeout(setRem, 300);
- }
- }, false);
- // 设置body上的字体大小
- if (doc.readyState === 'complete') {
- doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
- checkRem();
- }
- else {
- doc.addEventListener('DOMContentLoaded', function (e) {
- doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
- checkRem();
- }, false);
- }
- setViewport();
- // 设置rem值
- setRem();
- // html节点设置布局视口与理想视口的像素比
- docEl.setAttribute('data-dpr', dpr);
- };
- // 有些html元素只能以px为单位,所以需要提供一个接口,把rem单位换算成px
- lib.remToPx = function (remValue) {
- return remValue * newBase;
- };
- })(window, adaptive);
- if (typeof module != 'undefined' && module.exports) {
- module.exports = adaptive;
- } else if (typeof define == 'function' && define.amd) {
- define(function() {
- return adaptive;
- });
- } else {
- window.adaptive = adaptive;
- }
适配手机端rpx像素的更多相关文章
- CSS3及JS简单实现选项卡效果(适配手机端和pc端)
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
- 适配手机端之 rem
(function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...
- 用Desmos玩极坐标[适配手机端]
前言 数学给人的印象一直就是算算算,今天我们不算,我们只玩. 必备条件 ①."呆萌"软件--Desmos 网址:https://www.desmos.com/calculator, ...
- 手机端rem如何适配_rem详解及使用方法
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
- 关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
随机推荐
- c++ 11 线程池---完全使用c++ 11新特性
前言: 目前网上的c++线程池资源多是使用老版本或者使用系统接口实现,使用c++ 11新特性的不多,最近研究了一下,实现一个简单版本,可实现任意任意参数函数的调用以及获得返回值. 0 前置知识 首先介 ...
- angular1使用echarts2绘制图标
一.绘制柱状图:直接上代码 1.首先下载echarts-all文件(这里就不赘述了),然后是创建一个bar.js及内容如下: bar.js内容: var app = require("../ ...
- 明火烟雾目标检测项目部署(YoloV5+Flask)
明火烟雾目标检测项目部署 目录 明火烟雾目标检测项目部署 1. 拉取Docker PyToch镜像 2. 配置项目环境 2.1 更换软件源 2.2 下载vim 2.3 解决vim中文乱码问题 3. 运 ...
- [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑
[源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 目录 [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 1. 总述 2. 接口 2.1 ...
- 初探 Elasticsearch,学习笔记第一讲
1. ES 基础 1.1 ES定义 ES=elaticsearch简写, Elasticsearch是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本身扩展 ...
- 编程篇——Java学习路线
1.java基础编程2.Java多线程编程(并发)3.Java设计模式(重构)4.Java调试技术(Java虚拟机)5.Java常用框架学习篇6.Java开发之web篇
- 火狐firebug&firepath插件安装
火狐浏览器下掉了firebug和firepath插件,用户即使下载了火狐55以下的版本,也无法查找到这两个插件,以下方法可以解决哦 第1步:下载火狐55以内版本安装包,安装时迅速设置禁止自动更新版本, ...
- Java基础—构造方法
1.构造方法概述 构造方法是一种特殊的方法,用来创建对象,当我们不定义时,系统会默认给出一个无参构造方法:一旦我们定义了任意的构造方法,系统就不会给出默认的无参构造方法 格式如下: public ca ...
- windows 2008 R2磁盘清理
记录一次由于磁盘空间满,IIS使前端程序报500的事故 由于导出Api部署在IIS服务器,在程序调用导出Api会报500 发现windows服务器C盘已满 下面处理过程 只需复制cleanmgr.ex ...
- 如何看待malloc产生内存碎片
上代码直接研究: int main() { int *heap_d; int *heap_e; int *heap_f; heap_d = (int *)malloc(10); heap_e = (i ...