筑坐极_一天完成im首页

项目名称:im

开发者:睿萌萌

开发环境:HBuilder-X

首页前端界面如下：

一天完成im首页

利用rem布局，在不同的分辨率下，会自动适应不同的屏幕，进行大小调节。

顶部的导航栏引用了swiper插件。

内容区的电影引用了瀑布流插件。

用了极短的时间快速搭建好网页。

rem布局js代码如下：

<script type="text/javascript">
    (function(designWidth, maxWidth) {
	var doc = document,
	win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem, rootStyle;
	
	function refreshRem() {
	    var width = docEl.getBoundingClientRect().width;
	    if(!maxWidth) {
		maxWidth = 540;
	    };
	    if(width > maxWidth) {
	    width = maxWidth;
	    }

	    var rem = width * 100 / designWidth;
	
	    rootStyle = "html{font-size:" + rem + 'px !important}';
	    rootItem = document.getElementById('rootsize') || document.createElement("style");
	    if(!document.getElementById('rootsize')) {
	        document.getElementsByTagName("head")[0].appendChild(rootItem);
	        rootItem.id = 'rootsize';
	    }
	    if(rootItem.styleSheet) {
		rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
	    } else {
	        try {
	            rootItem.innerHTML = rootStyle
	        } catch(f) {
	            rootItem.innerText = rootStyle
	        }
	    }

	    docEl.style.fontSize = rem + "px";
	};
	refreshRem();
	
		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 = "16px";
		} else {
			doc.addEventListener("DOMContentLoaded", function(e) {
				doc.body.style.fontSize = "16px";
			}, false);
		}
	})(750, 750);
	$(function(){
		var swiper = new Swiper('.swiper-container', {
		  slidesPerView: 3,
		  spaceBetween: 30,
		  freeMode: true,
		  pagination: {
			el: '.swiper-pagination',
			clickable: true,
		  },
		});
	})
</script>

手机扫码查看项目:

一天完成im首页

一天完成im首页

许*

rem布局，swiper，瀑布流插件

使用rem布局，引入swiper、瀑布流插件，快速搭建网页。

2019.12.13

1334人

许*

天津市北辰区

Hot:8206

许*

当前作品暂无评分

还未获得评语哦~