屏幕调整大小 CSS 后布局更改 [英] Layout change after screen resize CSS

问题描述

我的设计有各种错误.

首先，这里是示例站点的链接我一直在努力学习 HTML 和 CSS.

First of all, here is the link to the example site that I have been doing to learn HTML and CSS.

http://ramroweb.com/mnml/style.css

当调整屏幕大小时，容器中的所有项目都会向右移动.即使我使用了 margin: 0 auto;

整个内容都在 div id="container" 内，但它仍然选择到 section 标签，不包括 footer 标签.

背景图像不适合整个尺寸，在 top 上创建了一些 padding.如果我能得到有关这些查询的帮助，那就太好了.

When the screen size is resized all the items from container moves to the right. Even though I used margin: 0 auto;

The whole content is within the div id="container" but still it selects upto the section tag excluding footer tag.

The background image does not fit the whole size creating some padding on the top. It would be great if I get help with these queries.

谢谢...

推荐答案

要获得响应式设计，请尝试使用百分比或 vw/vh 测量.这样所有元素都将获得与用户屏幕尺寸的相对尺寸.使您的网站可移动访问也是一种很好的做法，因此当您在较窄的屏幕上打开它时，所有内容都会很好地适应页面.更多信息 -> https://snook.ca/archives/html_and_css/vm-vh-单位.例如，查看此代码(显然您可能希望调整缩放比例以满足您的需要):

To get a responsive design try using percentages or vw/vh measurements. This way all the elements will get relative sizes to the user screen size. It's also good practice to make your website mobile accessible, so everything will nicely fit in the page when you open it on a narrower screen. More here -> https://snook.ca/archives/html_and_css/vm-vh-units. For example, check out this code (obviously you might want to adjust the scaling to fit your needs):

body {
    width: 100%;
    background: url(img/beach.png) center no-repeat;
    background-color: #f3f2de;
    font-family: Courier, monospace;
    font-size: 15%;
    margin: 0 auto;
}

#container {
    color: #cc0000;
    margin: 0 auto;
    width: 92%;
}

header {
    margin: 0 auto;
    text-align: center;
    border-bottom: solid 5% black;
}

nav {

}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
    padding: 0 10%;
    margin: 0 20%;
    font-weight: bold;
}

header {
    text-align: center;
    padding: 10% 0;
}

a:link {

}

a:visited {
    color: #cc0000;
}

a:hover {
    color: #fff200;
}

section {
    margin: 30% 0 40%;
}

section h1 {
    text-align: center;
    font-size: 1em;
}

section a {
    display: block;
    align-content: center;
    height: 100%;
    width: 50%;
    margin: 0 auto;
    margin-bottom: 30%;
}

footer {
    display: block;
    float: left;
}

这篇关于屏幕调整大小 CSS 后布局更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！