“21天好习惯“ 第十四期 — 14之黑马面面移动端布局(一)

最新推荐文章于 2024-10-18 11:12:30 发布

天才维伲尼狐

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量183

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_63045631/article/details/121172778

版权

javascript html5 css3

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果设计图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>黑马面面</title>
		<style type="text/css">
			body {
			  min-width: 320px;
			  max-width: 750px;
			  margin: 0 auto;
			  height: 1200px;
			  background-color: pink;
			}
@media screen and (min-width: 750px) {
  html {
    font-size: 37.5px !important;
  }
}
		</style>
	</head>
	<body>
		<script>
		(function flexible(window, document) {
			var docEl = document.documentElement;  //获取html的根元素
			var dpr = window.devicePixelRatio || 1;  //获取当前设备的大像素比，默认为1
			function setBodyFontSize() {
			if (document.body) {
				document.body.style.fontSize = (12 * dpr) + 'px';   //设置body的字体大小
			}
			else {
				document.addEventListener('DOMContentLoaded', setBodyFontSize)   //如果检测不到body,则先DOM元素加载再设置body的字体大小
			} 
		}
		setBodyFontSize();
		function setRemUnit() {
		var rem = docEl.clientWidth / 10   //获取页面宽度并将页面划为10份
		docEl.style.fontSize = rem + 'px'  //设置html的fontsize大小
		}
		setRemUnit();
		window.addEventListener('resize', setRemUnit);   //如果页面大小发生改变，重新获取html的Fontsize的大小
		window.addEventListener('pageshow', function(e) {
			if(e.persisted) {   //判断页面是否从缓存读取
				setRemUnit();   //如果是缓存读取则重新获取html的Fontsize的大小
			}
			else {
				setRemUnit();   //如果不是缓存读取也重新获取html的Fontsize的大小
			}
		})
}) (window, document)
		</script>	
	</body>
</html>