[已解决]网页的自适应显示请求，有偿寻求帮助

Amgalang · 发表于 2024-8-22 23:49:36

大家好，

我使用 Bootstrap 开发了一个网页，但遇到的问题是网页无法根据不同电脑的分辨率进行【自适应显示】。
我想有偿寻求帮助解决这个问题，网页里就三个模块，很简约的。如果您在这方面有经验，麻烦加我一下 QQ:1556434735，非常感谢。
本人急需解决这个问题，真心请教，期待您的回复。谢谢！

网址：http://mrdp.net/

最佳答案

月排行榜 / 总排行榜

Amgalang

2024-8-22 23:49:37

服务器有点不稳定，现在直接上本地的代码，希望大佬看看，谢谢：

以下是index.html文件中的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse Dictionary</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 100vh;
margin: 0;
}
#title {
margin-top: 20px;
text-align: center;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<div id="title">
<h1>Mongolian Reverse Dictionary</h1>
</div>
<iframe src="/search" name="searchFrame"></iframe>
</body>
</html>

复制代码

以下是search.html文件中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mongolian Reverse Dictionary</title>
<link rel="stylesheet">
<link rel="stylesheet" >
<style>
@font-face {
font-family: 'MongolianFont';
src: url('/static/fonts/MQG8F02.ttf') format('truetype');
}
body {
display: flex;
flex-direction: column;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
font-family: 'MongolianFont', sans-serif;
}
.content-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.search-container {
transform: rotate(90deg);
transform-origin: left top;
margin-left: 200px;
margin-top: 15px;
}
#search-box {
writing-mode: horizontal-tb;
width: 87vh;
height: 1.5cm;
}
#results {
writing-mode: horizontal-tb;
margin-top: -65px;
margin-left: 7.2cm;
display: flex;
flex-direction: column;
}
.item {
writing-mode: vertical-lr;
font-size: 25px;
}
.word-box {
padding: 5px;
}
#search-button {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.item-container {
display: flex;
flex-direction: column; /* Adjust direction for vertical alignment */
align-items: center; /* Center items for consistent appearance */
}
.order-number {
margin-bottom: 5px; /* Space between order number and word box */
font-size: 25px;
}
.word-box {
/* Styles remain unchanged, ensure it's suitable for vertical text */
display: inline-block; /* Adjust display to accommodate vertical text */
padding: 5px;
writing-mode: vertical-lr; /* Ensure text orientation is vertical */
flex-grow: 1;
font-size: 25px;
cursor: pointer;
}
.translation-layer {
position: absolute;
display: none;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
padding: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.translation-box {
background-color: white;
padding: 20px;
writing-mode: horizontal-tb;
display: flex; /* Ensure it's still a flex container */
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Space out children */
height: 100%; /* Ensure it takes full height */
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="search-container">
<input type="text" id="search-box" class="form-control" placeholder="ᠡᠷᠢᠬᠦ ᠦᠭᠡ ᠶᠢᠨ ᠢᠶᠡᠨ ᠳᠦᠷᠰᠦᠯᠡᠯ ᠢ ᠣᠷᠣᠭᠤᠯᠤᠭᠠᠷᠠᠢ᠂ ᠡᠰᠡᠪᠡᠯ 🔍 ᠳᠠᠷᠤᠪᠴᠢ ᠶᠢ ᠳᠠᠷᠤᠵᠤ ᠵᠢᠱᠢᠶ᠎ᠡ ᠶᠢ ᠦᠵᠡᠭᠡᠷᠡᠢ︕">
<button class="btn btn-primary" id="search-button">
<i class="fa fa-search"></i>
</button>
</div>
<div id="results" class="d-flex flex-column">
<div id="column1" class="flex-row"></div>
<div id="column2" class="flex-row"></div>
<div id="column3" class="flex-row"></div>
<div id="column4" class="flex-row"></div>
</div>
</div>
<div id="translation-layer" class="translation-layer">
<div id="translation-box" class="translation-box"></div>
</div>
<div id="loading" style="display: none;">
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#loading").hide();
if(sessionStorage.getItem('example_index') == undefined) sessionStorage.setItem('example_index', 0);
else sessionStorage.setItem('example_index', (sessionStorage.getItem('example_index') + 1) % 4);
// Function to create default items with colors
function createDefaultItems() {
for (var i = 0; i < 100; i++) {
var columnIndex = Math.floor(i / 25);
var column = $("#column" + (columnIndex + 1));
var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
var itemStyle = 'background-color: ' + color + ';';
var itemContainer = $('<div class="item-container"></div>');
itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
var item = $('<span class="word-box" style="' + itemStyle + '">               </span>'); // Empty content
itemContainer.append(item);
column.append(itemContainer);
}
}
// Create default items on page load
createDefaultItems();
$("#search-button").click(function(){
$("#loading").show();
var description = $("#search-box").val();
let examples = ['ᠲᠡᠩᠬᠡᠭᠡ ᠪᠦᠬᠦᠢ᠂ ᠴᠢᠳᠠᠯ ᠲᠡᠩᠬᠡᠭᠡ ᠶᠡᠬᠡᠲᠡᠢ᠂ ᠪᠢᠷ᠎ᠠ ᠴᠢᠳᠠᠯ ᠲᠠᠢ᠃', 'ᠰᠠᠨᠠᠭ᠎ᠠ ᠪᠤᠳᠤᠯ ᠢ ᠲᠠᠶᠢᠳᠬᠤᠷᠠᠭᠤᠯᠬᠤ᠂ ᠰᠡᠳᠬᠢᠯ ᠰᠠᠨᠠᠭ᠎ᠠ ᠶᠢ ᠠᠭᠤᠵᠢᠮ ᠪᠣᠯᠭᠠᠬᠤ᠃', 'ᠤᠴᠢᠷ ᠶᠠᠪᠤᠳᠠᠯ ᠤᠨ ᠮᠠᠰᠢ ᠪᠦᠲᠦᠮᠵᠢ ᠲᠠᠢ ᠪᠠᠷ ᠥᠭᠡᠳᠡᠯᠡᠨ ᠳᠠᠪᠰᠢᠬᠤ', 'ᠰᠡᠴᠡᠨ ᠰᠡᠷᠭᠦᠯᠡᠩ']
if(description == '')
{
description = examples[sessionStorage.getItem('example_index')];
$("#search-box").val(description);
}
// Clear existing results in each column
$("#results .flex-row").empty();
$.get("/getWords?description=" + description, function(data){
var words = data; // Assuming data is a list of strings
// Distribute words across columns
for (var i = 0; i < words.length; i++) {
var columnIndex = Math.floor(i / 25);
var column = $("#column" + (columnIndex + 1));
var itemNumber = i % 25 + 1;
var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
var itemStyle = 'background-color: ' + color + ';';
var itemContainer = $('<div class="item-container"></div>');
itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
var item = $('<span class="word-box" style="' + itemStyle + '">' + words[i] + '</span>');
itemContainer.append(item);
column.append(itemContainer);
}
$("#loading").hide();
});
});
$(document).click(function(event) {
if (!$(event.target).closest('.translation-layer, .word-box').length) {
$('#translation-layer').hide();
}
});
function getTranslations(word, position) {
$.get('/getTranslations?word=' + word, function(response) {
if (response.result === 'success') {
const groupedTranslations = {};
var translationsHtml = '';
// 遍历所有翻译，并按origin分组
Object.keys(response).forEach(key => {
if (key !== "result") {
translationsHtml += '<div style="flex-grow: 1;">'; // Flex container for translations
response[key].forEach((translation, index) => {
translationsHtml += (index + 1) + '. ' + translation + '<br>';
});
translationsHtml += '</div><div style="text-align: right;"><u>' + key + '</u></div>'; // New div for origin, aligned right
}
});
var $translationLayer = $('#translation-layer');
$translationLayer.html(translationsHtml)
.css({
'left': position.left + position.width + 10 + 'px',
'top': position.top + 'px'
})
.show();
}
});
}
$('#results').on('click', '.word-box', function() {
var word = $(this).text().trim();
var wordPosition = $(this).offset();
wordPosition.width = $(this).width(); // Add width to the position object
getTranslations(word, wordPosition);
});
});
</script>
</body>
</html>

复制代码

跳转到最佳答案楼层

Amgalang · 发表于 2024-8-22 23:49:37

这个最佳答案由 Amgalang 给出，感谢 Amgalang 的回答。

单击隐藏图章

服务器有点不稳定，现在直接上本地的代码，希望大佬看看，谢谢：

以下是index.html文件中的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse Dictionary</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 100vh;
margin: 0;
}
#title {
margin-top: 20px;
text-align: center;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<div id="title">
<h1>Mongolian Reverse Dictionary</h1>
</div>
<iframe src="/search" name="searchFrame"></iframe>
</body>
</html>

复制代码

以下是search.html文件中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mongolian Reverse Dictionary</title>
<link rel="stylesheet">
<link rel="stylesheet" >
<style>
@font-face {
font-family: 'MongolianFont';
src: url('/static/fonts/MQG8F02.ttf') format('truetype');
}
body {
display: flex;
flex-direction: column;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
font-family: 'MongolianFont', sans-serif;
}
.content-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.search-container {
transform: rotate(90deg);
transform-origin: left top;
margin-left: 200px;
margin-top: 15px;
}
#search-box {
writing-mode: horizontal-tb;
width: 87vh;
height: 1.5cm;
}
#results {
writing-mode: horizontal-tb;
margin-top: -65px;
margin-left: 7.2cm;
display: flex;
flex-direction: column;
}
.item {
writing-mode: vertical-lr;
font-size: 25px;
}
.word-box {
padding: 5px;
}
#search-button {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.item-container {
display: flex;
flex-direction: column; /* Adjust direction for vertical alignment */
align-items: center; /* Center items for consistent appearance */
}
.order-number {
margin-bottom: 5px; /* Space between order number and word box */
font-size: 25px;
}
.word-box {
/* Styles remain unchanged, ensure it's suitable for vertical text */
display: inline-block; /* Adjust display to accommodate vertical text */
padding: 5px;
writing-mode: vertical-lr; /* Ensure text orientation is vertical */
flex-grow: 1;
font-size: 25px;
cursor: pointer;
}
.translation-layer {
position: absolute;
display: none;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
padding: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.translation-box {
background-color: white;
padding: 20px;
writing-mode: horizontal-tb;
display: flex; /* Ensure it's still a flex container */
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Space out children */
height: 100%; /* Ensure it takes full height */
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="search-container">
<input type="text" id="search-box" class="form-control" placeholder="ᠡᠷᠢᠬᠦ ᠦᠭᠡ ᠶᠢᠨ ᠢᠶᠡᠨ ᠳᠦᠷᠰᠦᠯᠡᠯ ᠢ ᠣᠷᠣᠭᠤᠯᠤᠭᠠᠷᠠᠢ᠂ ᠡᠰᠡᠪᠡᠯ 🔍 ᠳᠠᠷᠤᠪᠴᠢ ᠶᠢ ᠳᠠᠷᠤᠵᠤ ᠵᠢᠱᠢᠶ᠎ᠡ ᠶᠢ ᠦᠵᠡᠭᠡᠷᠡᠢ︕">
<button class="btn btn-primary" id="search-button">
<i class="fa fa-search"></i>
</button>
</div>
<div id="results" class="d-flex flex-column">
<div id="column1" class="flex-row"></div>
<div id="column2" class="flex-row"></div>
<div id="column3" class="flex-row"></div>
<div id="column4" class="flex-row"></div>
</div>
</div>
<div id="translation-layer" class="translation-layer">
<div id="translation-box" class="translation-box"></div>
</div>
<div id="loading" style="display: none;">
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#loading").hide();
if(sessionStorage.getItem('example_index') == undefined) sessionStorage.setItem('example_index', 0);
else sessionStorage.setItem('example_index', (sessionStorage.getItem('example_index') + 1) % 4);
// Function to create default items with colors
function createDefaultItems() {
for (var i = 0; i < 100; i++) {
var columnIndex = Math.floor(i / 25);
var column = $("#column" + (columnIndex + 1));
var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
var itemStyle = 'background-color: ' + color + ';';
var itemContainer = $('<div class="item-container"></div>');
itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
var item = $('<span class="word-box" style="' + itemStyle + '">               </span>'); // Empty content
itemContainer.append(item);
column.append(itemContainer);
}
}
// Create default items on page load
createDefaultItems();
$("#search-button").click(function(){
$("#loading").show();
var description = $("#search-box").val();
let examples = ['ᠲᠡᠩᠬᠡᠭᠡ ᠪᠦᠬᠦᠢ᠂ ᠴᠢᠳᠠᠯ ᠲᠡᠩᠬᠡᠭᠡ ᠶᠡᠬᠡᠲᠡᠢ᠂ ᠪᠢᠷ᠎ᠠ ᠴᠢᠳᠠᠯ ᠲᠠᠢ᠃', 'ᠰᠠᠨᠠᠭ᠎ᠠ ᠪᠤᠳᠤᠯ ᠢ ᠲᠠᠶᠢᠳᠬᠤᠷᠠᠭᠤᠯᠬᠤ᠂ ᠰᠡᠳᠬᠢᠯ ᠰᠠᠨᠠᠭ᠎ᠠ ᠶᠢ ᠠᠭᠤᠵᠢᠮ ᠪᠣᠯᠭᠠᠬᠤ᠃', 'ᠤᠴᠢᠷ ᠶᠠᠪᠤᠳᠠᠯ ᠤᠨ ᠮᠠᠰᠢ ᠪᠦᠲᠦᠮᠵᠢ ᠲᠠᠢ ᠪᠠᠷ ᠥᠭᠡᠳᠡᠯᠡᠨ ᠳᠠᠪᠰᠢᠬᠤ', 'ᠰᠡᠴᠡᠨ ᠰᠡᠷᠭᠦᠯᠡᠩ']
if(description == '')
{
description = examples[sessionStorage.getItem('example_index')];
$("#search-box").val(description);
}
// Clear existing results in each column
$("#results .flex-row").empty();
$.get("/getWords?description=" + description, function(data){
var words = data; // Assuming data is a list of strings
// Distribute words across columns
for (var i = 0; i < words.length; i++) {
var columnIndex = Math.floor(i / 25);
var column = $("#column" + (columnIndex + 1));
var itemNumber = i % 25 + 1;
var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
var itemStyle = 'background-color: ' + color + ';';
var itemContainer = $('<div class="item-container"></div>');
itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
var item = $('<span class="word-box" style="' + itemStyle + '">' + words[i] + '</span>');
itemContainer.append(item);
column.append(itemContainer);
}
$("#loading").hide();
});
});
$(document).click(function(event) {
if (!$(event.target).closest('.translation-layer, .word-box').length) {
$('#translation-layer').hide();
}
});
function getTranslations(word, position) {
$.get('/getTranslations?word=' + word, function(response) {
if (response.result === 'success') {
const groupedTranslations = {};
var translationsHtml = '';
// 遍历所有翻译，并按origin分组
Object.keys(response).forEach(key => {
if (key !== "result") {
translationsHtml += '<div style="flex-grow: 1;">'; // Flex container for translations
response[key].forEach((translation, index) => {
translationsHtml += (index + 1) + '. ' + translation + '<br>';
});
translationsHtml += '</div><div style="text-align: right;"><u>' + key + '</u></div>'; // New div for origin, aligned right
}
});
var $translationLayer = $('#translation-layer');
$translationLayer.html(translationsHtml)
.css({
'left': position.left + position.width + 10 + 'px',
'top': position.top + 'px'
})
.show();
}
});
}
$('#results').on('click', '.word-box', function() {
var word = $(this).text().trim();
var wordPosition = $(this).offset();
wordPosition.width = $(this).width(); // Add width to the position object
getTranslations(word, wordPosition);
});
});
</script>
</body>
</html>

复制代码

FishC · 发表于 2024-8-22 23:49:51

您好，鱼油！根据您的描述，网页无法根据不同分辨率进行自适应显示，可能是某些自适应设计的基础规则没有正确应用。

对于这种情况，可以从以下几个方面入手进行排查：

1. **确保引入了正确的 Bootstrap 样式文件**：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

复制代码

2. **在 `<head>` 部分添加视口元标签**，确保正确缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

复制代码

3. **使用 Bootstrap 的栅格系统** 来布局模块，确保不同分辨率下能够灵活调整：

<div class="container">
<div class="row">
<div class="col-md-4">模块1</div>
<div class="col-md-4">模块2</div>
<div class="col-md-4">模块3</div>
</div>
</div>

复制代码

4. **检查自定义样式**，有时自定义的 CSS 会覆盖 Bootstrap 的样式，造成自适应问题。

如果这些方法依旧无法解决问题，您可以通过 QQ 联系合适的技术人员获取详细的帮助。希望这些建议对您有帮助！如有其他问题，欢迎继续提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

FishC · 发表于 2024-8-23 12:04:13

Amgalang 发表于 2024-08-23 12:04
服务器有点不稳定，现在直接上本地的代码，希望大佬看 ...

您好，鱼油。根据您的代码，以下是一些基本建议，确保您的网页在不同分辨率下自适应：

1. **使用Bootstrap的栅格系统**：
在您的`index.html`和`search.html`中，可以使用Bootstrap的栅格系统来确保元素在不同设备上有良好的布局。

例如，替换您的HTML中的某部分代码如下：
```html
<div class="container">
<div class="row">
      <div class="col-md-4">
         
      </div>

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

feiyu999 · 发表于 2024-8-23 17:27:18

写个全集化自适应CSS样式嵌入

Amgalang · 发表于 2024-8-24 08:58:57

feiyu999 发表于 2024-8-23 17:27
写个全集化自适应CSS样式嵌入

好的，谢谢您

账号		自动登录	找回密码
密码			立即注册