移动端适配——font-size计算
function calcFontSize(){
var view_width = window.screen.width;
var view_height = window.screen.height;
var font_size = view_width/15;//750设计图
// var font_size = view_width/16;//640设计图
var height_rem = view_height/font_size;
var html =document.getElementsByTagName('html')[0];
html.style.fontSize = font_size+'px';
}
//
window.onresize = function(){
calcFontSize()
} window.onload = function(){
calcFontSize()
}
rem,px,rpx之间的转化
//js转换
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
根据设计稿宽度计算,
1.若设计稿宽度是750,则1rpx = 1px,1rem=20*(750/320)+‘px’,若设计稿宽度是640,则1px = 750/640+‘rpx’,1rem=20*(640/320)+'px'=40px,
2.rpx换算,1px = (屏幕宽度/750)+‘rpx’;
淘宝移动端解决方案
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1 // adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize(); // set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
} setRemUnit() // reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
}) // detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
or
; (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 = {});
/*将根据已有的meta标签来设置缩放比例*/
if (metaEl) {
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));
}
}
}
/*当原先没有设置过meta,以及缩放比例
* iphone手机根据2,3屏幕处理
* 其他设备下,仍旧使用1倍的方案 得到dpr和scale的值
* */
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;
}
/*设置html的data-dpr的值*/
docEl.setAttribute('data-dpr', dpr);
/*
*scale
* 查询有没有meta属性,没有的情况下加上 <meta content='initial-scale= scale, maximum-scale=scale, minimum-scale=scale, user-scalable=no/>
* */
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);
}
}
/*
* 这个width跟dpr有关系 例如iphone5 dpr为2 得到的屏幕的宽为640px
* 例如iphone6 plus dpr为3 得到的屏幕的宽为1242px
* */
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
//注意这里,这里是适配手机的一个具体的参数,相对大于540的就不适用了
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
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();
/*rem转px
px转rem*/
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'] = {}));
移动端适配——font-size计算的更多相关文章
- 关于移动端的font和图片的问题
一.font-family 使用无衬线字体 body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- web移动端适配方案
web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...
- 超详细讲解H5移动端适配
前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...
- rem移动端适配
rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The f ...
- 解决vue移动端适配问题
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...
- web开发中移动端适配
这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮 ...
- css样式重置 移动端适配
css 默认样式重置 @charset "utf-8"; *{margin:0;padding:0;} img {border:none; display:block;} em, ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
随机推荐
- Windows代替touch命令
Windows 代替Linux中的touch命令: echo >
- UML之涉众/参与者(角色/执行者)(Actor)/业务主角(BusinessActor)/业务工人(BusinessWorker)/用户/角色辨析【图解】
参考文档: [业务建模](http://www.baike.com/wiki/%E4%B8%9A%E5%8A%A1%E5%BB%BA%E6%A8%A1) [UML 核心元素之参与者](http://w ...
- python之list+字典练习
d = { '春波':{ "car":{'BMW':5,'BENZ':3,'audi':3,'byd':4}, "house":["北京", ...
- 一看就懂——利用getJSON()与each()方法动态创建内容
一个案例——忘记的时候可以翻阅参考↓<务必放在服务器内才能看效果哟~> html文件内容如下↓ <!DOCTYPE html> <html> <head& ...
- Java开发环境配置(1)--tool准备
工具准备:1.eclipse-mars开发工具必须安装 2.XAMPP-环境集成了MYSQL,APACHE,TOMCAT建议安装 3.TOMCAT提供了二个版本(8.0和9.0),建议安装一个以备不时 ...
- Spring3.2+mybatis3.2+Struts2.3整合
1.Spring3.2不能用于JDK1.8,只能用于JDK1.7.JDK1.8用spring4.0. 2.导入的jar包 3.目录结构: 4.配置Spring 配置数据库信息: <?xml ve ...
- [转] 理解CheckPoint及其在Tensorflow & Keras & Pytorch中的使用
作者用游戏的暂停与继续聊明白了checkpoint的作用,在三种主流框架中演示实际使用场景,手动点赞. 转自:https://blog.floydhub.com/checkpointing-tutor ...
- ARMCC和GCC编译ARM代码的软浮点和硬浮点问题 【转】
转自:http://houh-1984.blog.163.com/blog/static/31127834201211112129167/ 本文介绍了ARM代码编译时的软浮点(soft-float)和 ...
- Windows PowerShell 入門(9)-エラー編
対象読者 Windows PowerShellでコマンドレット操作ができる方 何らかのプログラミング経験があればなお良い 必要環境 Windows PowerShell エラーをリダイレクトする リダ ...
- 码云 Git No network connection
背景 git,好久没用了都.心血来潮还是赶紧熟悉下吧.果不其然,每次要熟悉或开始一个东西,立马就出现问题.本来好好的环境竟然不行了,搞定后感觉应该是换了网络环境的事.这倒次要,主要让我想起了最初学习g ...