只用写一个阅览效果不错的阅读器网页适应手机屏幕的。需要留一个按钮可以让用户自己去调整字体大小和背景颜色
以下是一个简单的阅读器网页,适应手机屏幕,并留有调整字体大小和背景颜色的按钮:
<!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 著作权归作者所有。请勿转载和采集!