使用js解决移动设备适配问题

最新推荐文章于 2024-05-16 13:18:18 发布

lavendersue

最新推荐文章于 2024-05-16 13:18:18 发布

阅读量657

点赞数

分类专栏： js&jq 文章标签： js 移动设备适配

本文链接：https://blog.csdn.net/lavendersue/article/details/79543173

版权

js&jq 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

记得之前和大家分享过关于使用媒体查询来解决移动设备的适配问题。作为一名前端人员，当遇到需要做移动设备的时候，再加上要使用媒体查询进行移动端适配的前提下，我相信这时候的你是崩溃的。对于小编来说，最不想做的部分便是解决适配问题，使用媒体查询进行移动设备的设备是最最基本想法，但使用媒体查询，很多时候，宽度的范围，以及在相同宽度下不同高度的设备等等条件都需要考虑，有些时候经常会产生媒体查询之间的冲突，且，通过媒体查询进行的适配需要冗长的代码量，所以，对此，小编是相当拒绝的，但有时候，老板发话以及不得不使用下，小编在崩溃的边缘依旧含泪使用。
为了摆脱如此浪费时间和脑容量的工作量，在此，向大家介绍一种相对媒体查询而言，代码量大大减少却依然可以达到目的的方法——通过js解决移动设备问题。废话就到此，直接上代码。
1、

(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if(width > 768) {
			width = 768;
		}
		var rem = width / 7.5;
		docEl.style.fontSize = rem + 'px';
		docEl.style.fontSize = rem + 'px';
		docEl.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);

2、
注：该方法使用的单位为rem,与px的转换为1rem = 100px
例子：div:宽为100
1、如果设计稿为375，css:div{width:0.2rem};
2、如果设计稿为750，css:div{width:0.1rem}；

(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 = 100 * (clientWidth / 750) + 'px';
        };
    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    
    document.querySelector('body').style.visibility = "visible";

})(document, window);

最后再给大家奉献一个仿打字的文字动画效果：
第一种方法：

<body onLoad="newsFeed()">
			<form name="form1">
				<textarea wrap=physical rows=3 cols=25 name="news2"> 
				</textarea>
			</form>
			<script language="JavaScript">
				function makeArray() {
					this.length = makeArray.arguments.length
					for(var i = 0; i < this.length; i++)
						this[i + 1] = makeArray.arguments[i]
				}
				var fArray = new makeArray;
				fArray[0] = "舒窈站在台上，一脸无措，水顺着衣服一滴滴滴在地板上，旁边同学异样的眼神让她如针芒在背";
				fArray[1] = "水...";
				fArray[2]="顺着衣服一滴滴滴在地板上"
				fArray[3] = "旁边同学异样的眼神让她如针芒在背";
				var x = 1;
				var y = 0;
				var msg1 = fArray[y];

				function newsFeed() {
					if(x == msg1.length + 1) {
						for(var j = 0; j < 70000; j++);
						y += 1;

						if(y > 3) y = 0;
						document.form1.news2.value = ' ';
						msg1 = fArray[y];
						x = 0;
					}
					document.form1.news2.value = msg1.substring(0, x);
					x += 1;
					setTimeout("newsFeed() ", 300);
				}
			</script>
		</body>

第二种方法：

<span id="demo"></span>
function fontAnimation(dom, str) {
	var i = 0; //当前文字的下标
	var timer;
	var len = str.length;
	timer = setInterval(() => {
		dom.append(str.charAt(i));
		if(i++ === len) {
			clearInterval(timer);
			timer = null;
			i = 0;
		}
	}, 100);
}
fontAnimation($("#demo"),"dfkajfkafhalfafalja");

lavendersue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用js解决移动设备适配问题

记得之前和大家分享过关于使用媒体查询来解决移动设备的适配问题。作为一名前端人员，当遇到需要做移动设备的时候，再加上要使用媒体查询进行移动端适配的前提下，我相信这时候的你是崩溃的。对于小编来说，最不想做的部分便是解决适配问题，使用媒体查询进行移动设备的设备是最最基本想法，但使用媒体查询，很多时候，宽度的范围，以及在相同宽度下不同高度的设备等等条件都需要考虑，有些时候经常会产生媒体查询之间的冲突，且，...
复制链接

扫一扫

专栏目录