如何设计我的网站，使其具有适合手机的功能？

Question

我是网页设计的新手，我创建了这个网站。如果用户在移动设备上打开网站，我希望导航栏成为可点击的下拉菜单并转到顶部。我加了一个picture.if可以请你详细解释一下。提前致谢。 Picture of my table

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>

Answer 1

构建完全响应式网站的众多工具之一可能是多种工具的组合。需要注意的一件事是要有一个大致的了解。

考虑到这一点，我建议您看看 CSS Media Queries。然后当您获得理解时，您可以继续使用强大的网格系统和 CSS 框架。

媒体查询的简短示例：

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

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

使用响应式设计时要记住的另一件事是移动设备在不断发展，质量越来越好，这意味着 Retina Display 也是优化网页时要考虑的事情适用于多个设备。

Flexbox 是一个非常强大的 CSS 工具包，可让您构建完全响应式网站。

Bootstrap is a very popular CSS Framework that also utilizes Flexbox in its many powerful classes. You can find out much more about Bootstrap by reading the documentation.

Answer 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

如何设计我的网站，使其具有适合手机的功能？

How to design my website so that it has proper functionality for mobile phones?

html

css

responsive-design