rem移动端课程表案例

<html>
<head>
	<meta charset="utf-8">
	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
	<title></title>
	<script src='js/underscore.js'></script>

	<style>

		table{
			width:3.995rem;

			text-align: center;

			font-size: 0.090rem;
			margin:0px auto;

		}
		th{
			text-align: center;
		}
		tr
		{
			height: 0.159rem;
		}
	</style>
</head>
<body>
	<script>
		//页面加载完毕后设置html字体大小
		window.onload=function()
		{
			//获取标准rem单位
			document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
		}
		//视口发生变化时调用
		window.onresize=function()
		{
			document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
		}
	</script>
	
</body>
	<table border='1' align="center" cellspacing="0" >
		<tr>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
			<th>星期六</th>
			<th>星期日</th>
		</tr>
		<tr>
			<td>语文</td>
			<td>数学</td>
			<td>英文</td>
			<td>物理</td>
			<td>化学</td>
			<td>生物</td>
			<td>体育</td>

		</tr>
			<tr>
			<td>语文</td>
			<td>数学</td>
			<td>英文</td>
			<td>物理</td>
			<td>化学</td>
			<td>生物</td>
			<td>体育</td>

		</tr>
			<tr>
			<td>语文</td>
			<td>数学</td>
			<td>英文</td>
			<td>物理</td>
			<td>化学</td>
			<td>生物</td>
			<td>体育</td>

		</tr>
	</table>

</html>
发布了281 篇原创文章 · 获赞 3 · 访问量 4822

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104001374