我是前端网页设计的新手，一直在努力让下面的网页有一个更好的响应设计：
The webpage made with Ionic Framework displayed on a 1920x1080 monitor
我相当高兴的大小，布局和比例，因为是;然而，网页仍然不能很好地缩放到其他屏幕分辨率。我尽量使用%为基础的大小调整，但许多元素仍然不能很好地缩放。
The webpage displayed on lower resolution monitors
按钮被剪切，元素与父块的大小比例被打乱，文本保持相同大小，块#1项目与卡片的其余部分重叠。我希望获得如何最好地使网页在不同分辨率下尽可能一致的指导，或者您可能对改进我的响应式设计提出的一般建议。
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=0.01, user-scalable=1.0" />
<meta name="color-scheme" content="dark" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
<ion-app style="height: 100%; width: 100%;">
<ion-content style="height: 100%; width: 100%;">
<ion-grid style="height: 100%; width: 100%;">
<ion-row style="height: 100%; width: 100%;">
<ion-col id="grid_left_half" style="height: 100%; width: 50%; background-color: #5E5694;" class="col_vertical_align">
<ion-row id="col_upper_half" style="width: 85%; height: 50%; background-color: #3B666B;">
<ion-col id="block_one" style="height: 100%; width: 50%;">
<ion-card style="height: 95%;">
<ion-card-header style="height: 10%;">
<ion-card-title>Block #1</ion-card-title>
</ion-card-header>
<ion-card-content style="height: 65%;">
<ion-item>
<ion-label>Variable #1</ion-label>
</ion-item>
<ion-item>
<ion-label>Variable #2</ion-label>
</ion-item>
<ion-item>
<ion-label>Variable #3</ion-label>
</ion-item>
<ion-item>
<ion-label>Variable #4</ion-label>
</ion-item>
<ion-item>
<ion-label>Variable #5</ion-label>
</ion-item>
<ion-item>
<ion-label>Variable #6</ion-label>
</ion-item>
</ion-card-content>`
<ion-card-content class="stretch_content_horizontally">
<form id="form_one" action="/" method="get">
<ion-button id="button_one" type="submit" disabled>
aaaaaa
</ion-button>
</form>
<form id="form_two" action="/" method="get">
<ion-button id="button_two" type="submit" disabled>
bbbbbb
</ion-button>
</form>
<ion-button id="button_three" type="submit" onclick="">
ccccccc
</ion-button>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col id="block_two" style="height: 100%; width: 50%;">
<ion-card style="height: 95%;">
<ion-card-header>
<ion-card-title>
Block #2
</ion-card-title>
</ion-card-header>
<ion-card-content style="height: 65%; overflow-y: scroll; overflow-x: hidden;">
<ion-list id="block_two_list" style="height: 100%;">
<ion-item>
<ion-label>
Entry #1
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
<ion-item>
<ion-label>
Entry #2
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
<ion-item>
<ion-label>
Entry #3
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
<ion-item>
<ion-label>
Entry #4
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
<ion-item>
<ion-label>
Entry #5
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
<ion-item>
<ion-label>
Entry #6
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
<ion-item>
<ion-label>
Entry #7
</ion-label>
<ion-button style="float: right;">
mmmm
</ion-button>
</ion-item>
</ion-list>
</ion-card-content>
<ion-card-content class="stretch_content_horizontally">
<ion-button id="button_one" type="button" disabled>
aaaa
</ion-button>
<ion-button id="button_two" type="button" disabled>
bbbbb
</ion-button>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row id="col_lower_half" style="width: 85%; background-color: #2b669a;">
<ion-col style="height: 100%; width: 100%;">
<ion-card id="card-owner-info">
<ion-card-header>
<ion-card-title>
Block #3
</ion-card-title>
</ion-card-header>
<ion-card-content class="stretch_content_horizontally">
<ion-card style="width: 50%;">
<ion-card-content>
<ion-item>
<ion-label>
Variable #1: <a target="_blank" rel="noopener noreferrer">Some link</a>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
Variable #2
</ion-label>
</ion-item>
</ion-card-content>
<ion-card-content class="stretch_content_horizontally">
<ion-button id="button_one" disabled type="submit" onclick="">
pppppppp
</ion-button>
<ion-button id="button_two" disabled type="submit">
ccccccc
</ion-button>
</ion-card-content>
</ion-card>
<ion-card style="width: 50%;">
<ion-card-content>
<ion-item>
<ion-textarea rows="5" readonly placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "></ion-textarea>
</ion-item>
</ion-card-content>
</ion-card>
</ion-card-content>
</ion-card>
<ion-label>
<p class="ion-text-center copyright_notice_text">Copyright Notice.</p>
<br>
</ion-label>
</ion-col>
</ion-row>
</ion-col>
<ion-col id="grid_right_half" style="height: 100%; width: 50%; background-color: #1b6d85;" class="col_vertical_align">
<ion-card id="block_four" style="height: 80%; width: 85%; resize: vertical; ">
<ion-card-header>
<ion-card-title>
Block #4
</ion-card-title>
</ion-card-header>
<ion-card-content id="log" style="height: 90%; width: 100%; overflow-y: scroll;">
<div style="padding: 0 0 20px 0">
<ion-textarea id="log-txt" style="height: 100%; width: 100%; overflow-wrap: anywhere;" auto-grow wrap="hard" readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</ion-textarea>
</div>
</ion-card-content>
</ion-card>
<ion-card id="block_five" style="width: 85%;">
<ion-card-content class="stretch_content_horizontally">
<ion-item style="width: 88%">
<ion-input id="log-input" minlength="1" maxlength="350" clear-input placeholder="Type your message..."></ion-input>
</ion-item>
<ion-button id="log-submit" type="button" >
Send
</ion-button>
</ion-card-content>
</ion-card>
<ion-row>
<ion-col></ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-app>
<script>
.stretch_content_horizontally {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.col_vertical_align {
display: flex;
width:100%;
flex-direction: column;
align-items: center;
justify-content: center
}
</script>先谢谢你。
1条答案
按热度按时间mefy6pfw1#
这就是你答案。
PS：很明显，你需要根据你的喜好编辑这个！！如果你需要解释，搜索" meta，HTML“！