1、PC端
当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:
;(function(win) {
var tid;
function refreshRem() {
let designSize = 1920; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
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);
refreshRem();
})(window);
计算font-size的逻辑是：
当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem.
2、移动端
由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可
$(function(){
let designSize = 750; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
})
使用REM能够较好的自适应移动端
手机平板移动设备的宽度不超过1080,如果设备已经超过了这个宽度,则不应再计算html的font-size值了.因为已经是PC屏幕了.
if ( window.innerWidth>1080)
return;
3、移动端适配升级版
首先我使用sublime进行开发，可以先在github上下载css转rem工具代码：cssrem
链接：https://github.com/flashlizi/cssrem
设置px_to_rem为37.5，可以写死，意思就是使用ipone6屏幕尺寸进行开发
vscode可以使用px to rem & rpx (cssrem)进行转换。修改默认16px为18.75
rem代码：放在JS中
(function(win) {
var docEl = win.document.documentElement; var tid; function setRemUtils() {
// 获取rem基准值 var rem = docEl.clientWidth / 20;// 窗口宽度，如果是750设计图，则将10改为20 // 动态设置html根元素的font-size docEl.style.fontSize = rem + 'px'; } setRemUtils(); // 窗口变化时触发 win.addEventListener('resize', function() {
clearTimeout(tid); tid = setTimeout(setRemUtils, 300); }, false); win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid); tid = setTimeout(setRemUtils, 300); } }, false); })(window) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/213837.html原文链接：https://javaforall.net
![人工神经网络（ANN）及BP算法[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
