YouTip

## CSS Code /* Navbar styles */ .navbar{ background-color:#333; padding:10px; display:flex; justify-content:space-between; } /* Logo styles */ .logo{ color:#fff; font-size:20px; text-decoration:none; } /* Menu styles */ .menu{ list-style-type:none; margin:0; padding:0; display:flex; } .menu li { margin-left:10px; } .menu li a { color:#fff; text-decoration:none; } /* Media query: adjust layout on small screens */ @media screen and (max-width: 600px) { .navbar{ flex-direction:column; align-items:center; } .menu{ margin-top:10px; } .menu li { margin-left:0; } } [Try it »](#) In the above example, we first use the `` tag to set the viewport, ensuring the web page displays at the correct scale on mobile devices. Then, we link the stylesheet to the HTML file using the `` tag. In the CSS, we define the styles for the navbar (`.navbar`), the logo (`.logo`), and the menu (`.menu`). The menu uses Flexbox layout for horizontal arrangement. Next, we use a media query (`@media`) to adjust the layout on small screens. When the screen width is less than or equal to 600 pixels, the styles within the media query will apply. In this case, the direction of the navbar changes to vertical alignment, the menu becomes centered, and the left margin of the menu items is set to 0. Through this simple example, when viewed on different devices, the layout and style of the navigation bar will automatically adjust based on the screen size, providing a better user experience.