如何设计我的网站，使它有适当的功能为手机？

提问者：小点点

如何设计我的网站，使它有适当的功能为手机？

我是网页设计的新手，我创建了这个网站。我想把导航栏变成一个可点击的下拉菜单，如果用户在移动端打开网站，它就会出现在顶部。我加了一张图，如果你能详细解释一下。提前谢谢你。我的桌子的图片

navbar元素名为navbar，是tmpmainpage模板的一部分

<body onload(setData)>
    
    <bbl-mainpage id="MainPage" opts="Inventory,Ledger,Graph,Settings" col="navbar,content">
    </bbl-mainpage>

    <template id="tmpMainPage">
        <style>
        
            * {
                height: 100%;
                width: 100%;

            }
            
            :host .logo {
                /* top: 10px; */
                width: 95%;
                height: 15%;
                align-items: center;
                justify-content: center;
                display: flex;
                position: absolute;
            }

            :host .navbar {
                height: 100%;
                width: 10vw;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background: #2f4f4f;
                overflow: none;
                padding-top: 20px;
                display: block;
                align-items: center;
                justify-content: center;
                text-align: center;
                flex-flow: column;

            }

            :host .navbar .options {
                display: grid;
                grid-template-rows: repeat(5, .5fr);
                height: 200px;
                width: 100%;
                position: absolute;
                z-index: 1;
                left: 0;
                bottom: 30%;
                color: white;
                margin: 0 auto;
                padding: 15px 0 5px 0;
                float: left;

            }

            :host .navbar .logout {
                display: grid;
                grid-template-rows: repeat(5, .5fr);
                height: 100px;
                width: 100%;
                position: absolute;
                z-index: 1;
                left: 0;
                top: 70%;
                color: white;
                margin: 0 auto;
                padding: 15px 0 5px 0;
                float: left;
            }

            :host a {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            :host .navbar a:hover {
                background-color: rgba(0, 0, 0, 0.2);
            }

            .activated,
            :host .navbar a:active {
                background-color: #2f6f6f;
            }

            .deactived {
                background-color: rgba(0, 97, 50, 1);
            }

            :host .mainDiv .content {
                position: fixed;
                width: 90vw;
                float: right;
                top: 0;
                bottom: 0;
                right: 0;
            }

          
            .settings :host .mainDiv {
                width: 100vw;
                height: 100vh;
            }
        </style>
        <div class="mainDiv">
            <div class="navbar">
                <div class="options"></div>
                <div class="logout">
                    <a href="logout.php" style="color: white;">Log Out</a>
                </div>
            </div>
            <div class="content">
                
            </div>
        </div>
    </template>
</body>
</html>

共2个答案

匿名用户

尝试使用媒体查询('@media')来了解移动设备何时正在访问您的网站，并在它发生时应用适当的CSS。

@media only screen and (max-width:640px) {

     <!-- all your css for a top dropdown navbar here -->

}

您可以在以下网址阅读更多内容:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

匿名用户

建立一个完全响应性网站的众多工具之一可以是多种工具的组合。要注意的一件事是要有一个总体的理解。

因此，考虑到这一点，我建议您看一看CSS媒体查询。然后，当您获得了理解，您就可以转向强大的网格系统和CSS框架。

媒体查询的简短示例:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上面示例的样式只有在屏幕宽度达到600px时才会执行。

在使用响应式设计时要记住的另一件事是，移动设备不断地处于开发中，并且质量越来越好，这意味着视网膜显示也是为多个设备优化您的网页时需要考虑的东西。

Flexbox是一个非常强大的CSS-kit，它将允许你建立完全响应的网站。

Bootstrap是一个非常流行的CSS框架，在它的许多强大的类中也利用了Flexbox。您可以通过阅读文档了解更多有关Bootstrap的信息。