Question

嗨，任何人都可以帮我告诉我在我的aspx页面上哪里出错了，当我在不同的屏幕上显示网页时，页面看起来不一致，我是css等的新手......我只想让我的页面留下来在我使用的任何屏幕尺寸上都一样..这里是我的HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WorkStationUITarget.Default" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="refresh" content="10"> <%--refreshes after 10 seconds --%>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="CSS/style.css" rel="stylesheet" />

    <style>


         body {
             font-family: Arial;
             color: white;
         }

        .split {
            height: 100%;

            position: fixed;
            z-index: 1;
            top: 0;
            overflow-x: hidden;
            padding-top: 20px;
        }

        .left {
            left: 0;
            background-color: #110;
            width: 30%;

            text-align: center;
        }


        .right {
            right: 0;
            background-color: white;
            width: 70%;
            position: fixed;
            text-align: center;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .centered img {
            width: 150px;
            border-radius: 50%;
        }
    </style>
</head>
<body>

   <form runat="server">

<div class="split left">
    <div class="center">

        <h1 style="color: red; font-weight: bold; position: static; text-align: center; padding-top: 25px; padding-right: 30px; "> TOTAL QUANTITY PACKED
       <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:productionConnectionString %>' SelectCommand="uspGetPackStatisticsPerShiftTotal" SelectCommandType="StoredProcedure">
           <SelectParameters>
               <asp:Parameter DefaultValue="2016-06-06 06:00" Name="ShiftStart" Type="DateTime"></asp:Parameter>
               <asp:Parameter DefaultValue="2016-06-06 13:59:59" Name="ShiftEnd" Type="DateTime"></asp:Parameter>
               <asp:Parameter DefaultValue="214" Name="SeriesMasterId" Type="Int32"></asp:Parameter>

           </SelectParameters>
       </asp:SqlDataSource>
        <asp:formview id="FormView" runat="server" datasourceid="SqlDataSource1">
            <itemtemplate>

                <asp:Label ID="labeltotal" runat="server" Text='<%# Eval("TotalPacked") %>'  Width="100%" Height="100%" Font-Size="250px" style="position: static; text-align: center; padding-top: 280px; padding-right: 85px; color: #ff0000 "></asp:Label>
            </itemtemplate>
        </asp:formview>


            <img src="Logo/asdablack1.png"   style="position: static;  top: 110px;  padding-top: 300px";  />
        </div>

        <div class="body-container;">
    </div>
</div>
<div class="split right">
    <div class="center">


        <asp:DropDownList ID="Dropdownlist1" runat="server" AutoPostBack="True" align="centered"  OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"   Font-Bold="True">
            <asp:ListItem Value="214">214</asp:ListItem>
            <asp:ListItem Value="225">225</asp:ListItem>
            <asp:ListItem value="1">1</asp:ListItem>

            </asp:DropDownList>


        <h1 style="color: red; font-weight: bold; text-align: center;">CELL TARGETS & ACTUAL FIGURES</h1>

        <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" BorderWidth="5px" CellPadding="25" ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center" Font-Size="24px" OnRowDataBound="GridView1_RowDataBound" >
            <AlternatingRowStyle BackColor="White"/>
            <FooterStyle BackColor="#CCCC99"/>
            <HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black"/>
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right"/>
            <RowStyle BackColor="#F7F7DE"/>
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black"/>
            <SortedAscendingCellStyle BackColor="#FBFBF2"/>
            <SortedAscendingHeaderStyle BackColor="#848384"/>
            <SortedDescendingCellStyle BackColor="#EAEAD3"/>
            <SortedDescendingHeaderStyle BackColor="#575357"/>


        </asp:GridView>

        <div class="w3-container">
            <div class="center">
                <style>
                    div { padding: 30px 10px 15px; }

                    .newStyle1 {
                        color: #FF0000;
                        font-size: 86px;
                    }
                </style>
            </div>

            <img src="Logo/asdawhite1.png" style="padding-left: 70px; padding-top: 13px; position: static; text-align: center;"/>
        </div>
    </div>
</div>
  </form>

</body>
</html>

所以当我使用我的15＆＃34;监视器，一切都很好，但是当我使用更小或更大的屏幕时，我的页面变得混乱，一切都不合适..请任何人帮助我的代码。

Answer 1

响应式设计是关于构建可以重塑为不同形状因素的Web体验。例如，当您在计算机上打开Facebook时，它看起来是单向的，但是当您在手机上打开它时，它是相似的，但是流线型以适应较小的屏幕。

首先，我建议您尝试学习CSS的简单部分。测试添加样式和制作类。 W3Schools有一个很好的CSS教程。然后，当您想要制作响应式用户界面时，我认为您应该从Bootstrap开始。 Bootstrap是一个CSS框架，很棒的人设计了一些非常有用的CSS，你可以用HTML中的类属性将它应用到你的页面。

如果您真的想直接这样做，可以调用CSS函数根据屏幕大小应用样式。使用CSS文档中的media-query功能在较小的屏幕上重新定位内容。

HTML调整页面大小以适应任何大小的监视器

1 个答案: