以下是一个简单的阅读器网页,适应手机屏幕,并留有调整字体大小和背景颜色的按钮:

<!DOCTYPE html>
<html>
<head>
	<title>阅读器</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			font-size: 16px;
			background-color: #fff;
			color: #333;
			padding: 10px;
			line-height: 1.5;
		}
		
		h1, h2, h3 {
			margin: 1em 0;
		}
		
		#controls {
			position: fixed;
			top: 0;
			right: 0;
			padding: 10px;
			background-color: #eee;
			z-index: 9999;
		}
		
		button {
			margin: 0 5px;
		}
	</style>
</head>
<body>
	<h1>欢迎使用阅读器</h1>
	<p>这是一个简单的阅读器网页,适应手机屏幕,并留有调整字体大小和背景颜色的按钮。</p>
	<h2>功能介绍</h2>
	<ul>
		<li>自适应手机屏幕</li>
		<li>调整字体大小</li>
		<li>调整背景颜色</li>
	</ul>
	<h2>使用方法</h2>
	<p>点击下方的按钮可以调整字体大小和背景颜色,适应您的阅读习惯。</p>
	<div id="controls">
		<button onclick="decreaseFontSize()">A-</button>
		<button onclick="increaseFontSize()">A+</button>
		<button onclick="changeBackground('#fff')">白色</button>
		<button onclick="changeBackground('#f2f2f2')">灰色</button>
		<button onclick="changeBackground('#333')">黑色</button>
	</div>
	
	<script>
		function decreaseFontSize() {
			var currentSize = parseFloat(document.body.style.fontSize);
			if (currentSize > 12) {
				document.body.style.fontSize = (currentSize - 2) + 'px';
			}
		}
		
		function increaseFontSize() {
			var currentSize = parseFloat(document.body.style.fontSize);
			if (currentSize < 24) {
				document.body.style.fontSize = (currentSize + 2) + 'px';
			}
		}
		
		function changeBackground(color) {
			document.body.style.backgroundColor = color;
		}
	</script>
</body>
</html>

该网页使用了<meta>标签来设置适应手机屏幕,使用了CSS样式来设置字体大小、背景颜色等。按钮使用了<button>标签,并绑定了JavaScript函数,用户点击按钮后可以调整字体大小和背景颜色。

只用写一个阅览效果不错的阅读器网页适应手机屏幕的。需要留一个按钮可以让用户自己去调整字体大小和背景颜色

原文地址: https://www.cveoy.top/t/topic/62d 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录