手机端适配rem计算方法

一、手机腾讯网根节点字体计算方案1

(function() {

var baseFontSize = 100;

var baseWidth = 320（下改）;

var clientWidth = document.documentElement.clientWidth || window.innerWidth;

var innerWidth = Math.max(Math.min(clientWidth, 480), 320);

var rem = 100;

if (innerWidth > 320 && innerWidth <= 375) {

rem = Math.floor(innerWidth / baseWidth * baseFontSize /** 0.9*/);

}

if (innerWidth > 375) {

rem = Math.floor(innerWidth / baseWidth * baseFontSize /** 0.84*/);

}

document.querySelector('html').style.fontSize = rem + 'px';

})();

</script>

这种方法在安卓、iphone、ipad等常规手机上都挺好，在使用中发现，如果单纯使用rem做页面适应，会发现很多小数点。

拿：iphone6来说，设计师给的图是750px，首先，要在制作的时候除以自己要想着除以2，因为iphone宽度是375px，再除以跟元素的px值，而拿iphone6来说，在自己前面计算除以2的值基础上再除以117px（根的px值）,除完117会发现很多小数点，如果用less还好点，直接定义@base-html:117rem；例如@base-html/12，这样不用小数点，但是如果不是用less,自己去计算会算到想吐；

二、手机腾讯网根节点字体计算方案2
(function() {
var baseFontSize = 100;
var baseWidth = 375（改）;
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
var innerWidth = Math.max(Math.min(clientWidth, 480), 360);

var rem = 100;
if (innerWidth >= 414) {
rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.98);
} else {
rem = Math.floor(innerWidth / baseWidth * baseFontSize);
}

document.querySelector('html').style.fontSize = rem + 'px';
}());

如果设计师给750px设计的ui图，同上，在自己前面计算除以2的值基础上再除以100px（根的px值）,这个没多少小数点，那问题来了，如果是设计师给的不是750的图呢？

三、根节点字体计算方案3

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

// if(!clientWidth>640){

// docEl.style.fontSize = 10 +'px';

// }else{

// docEl.style.fontSize = 10* (clientWidth / 640) + 'px';

// };

docEl.style.fontSize = 100* (clientWidth / 750*这个值根据设计师给的来填写) + 'px';

};

if(!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document,window)

方法三:还不错，这个不用再设计图的基础上除以2，如果设计师给750px设计的ui图，padding：72px;直接写0.72rem即可，上面已经放大100倍，还可以根据需要，看上面*这个值根据设计师给的来填写

缺点：在ipad上会出现模糊的情况。

四、根节点字体计算方案4

（注:不要手动设置viewport，该方案自动帮你设置）

方案四（推荐）：

根据设备屏幕的DPR,自动设置最合适的高清缩放。

保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大，会模糊；此方案是，屏幕越大，看的越多）

注意1：如果元素的宽度超过效果图宽度的一半（效果图宽为640或750），果断使用百分比宽度，或者flex布局。

注意2：如果引入第三方插件，css大小固定记得用less等

//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size.px2rem(@name, @px){@{name}: @px / @baseFontSize * 1rem;}//使用示例：
.container {.px2rem(height, 240);}

注意三：面对实在太多css不能压缩

源代码压缩flex(false, 100, 1) 想要关闭则window.flex(true)，马上关闭压缩就可以了，而rem的用法保持不变。

注意四：这个rem适合写固定尺寸。其余的根据需要换成flex或者百分比。

转载于:https://www.cnblogs.com/cainiao-vcu/p/8270497.html

手机端适配rem计算方法相关推荐

关于手机端适配的问题（rem，页面缩放）
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
css iohone手机端适配,【css】适配iphoneX
Web App适配iPhoneX 前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native ...
魔众积分商城系统 v1.2.0 手机端适配增强，更易用的积分商场
魔众积分商城系统提供积分商城,会员积分系统,积分兑换商城,积分系统,积分运营,营销活动工具,积分游戏.API接口对接会员积分系统,简单配置页面即可上线,助力企业会员运营管理. 魔众积分商城系统发布v1 ...
h5手机端适配字体设置
前言手机端页面动态设置根元素,适配不同屏幕大小. 开始 <script>//rem为html的字体大小通过改变html的字体大小达到适配的效果remChange();//监听屏幕改变r ...
手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
php代码适配手机端,js / php 手机端适配代码
第一. 使用js让广告适配合适的设备(当然你也可以直接让css来隐藏掉广告,但是js可以让网页的速度快一点,因为不需要去加载web端的广告了) function is_mobile() { var r ...
东北狼仙：苏宁手机端样式rem+flexible.js
手机端研究了好几天做了手机端,还好基础的程序员生活不是很难,用心做几个项目撸出来就好了,最近学些rem布局挺不错的针对手机端使用比较不错,整个页面都可以自适应解决了字体图片等等的整体变大变小不会让页面 ...
html手机端适配怎么调试,html5面试常见问题及答案：移动端布局与适配篇
原标题:html5面试常见问题及答案:移动端布局与适配篇 1. 移动布局自适应不同屏幕的几种方式 (1)响应式布局 (2)100%布局(弹性布局) (3)等比缩放布局(rem) 2. iscroll安 ...

手机端适配rem计算方法

手机端适配rem计算方法相关推荐

最新文章

热门文章