Question

我最近开始学习HTML和CSS，并且在实践中我一直在创建投资组合网站。我知道我现在制作的网站并不多，但我有一个关于分屏布局的问题。

问题是：我怎样才能使这个响应？通过响应，我的意思是无论屏幕尺寸如何，两边的宽度和高度都相等。我没有太多的响应式设计练习。我知道flexbox，就是这个。页面的两个部分是在flexbox中制作的。我尝试将单位从px切换到ems，但这似乎没有明显效果。

这种响应的最佳方式是什么？还有什么是开始学习响应式设计的好资源？感谢。

代码：https://jsfiddle.net/6w7uj3a9/

   .sideone {
display: flex;
justify-content: flex-start;
background-color: #3B3355;
width: 900px;
height: 720%;
z-index: 2;
border-right: 45px solid #3B3355;
flex: auto;
max-width: 900px;
min-width: 900px;}

   .sidetwo {
display: flex;
justify-content: flex-end;
background-image: url(city.jpg);
filter: blur(3px);
transform: scale(1.03  );
background-size: 175% auto;
width: 73em;
height: 720%;
z-index: 1;
max-width: 73em;
min-width: 73em; }

右边的图像只是占位符我保存了首选图像。

Answer 1

我建议从https://www.codecademy.com/学习HTML或CSS的任何方面。它对于初学者来说大多是免费的，也是了解你似乎要问什么的好资源。然而，在问题的其余部分，似乎不清楚你在问什么。我建议清理你的代码，添加一些注释让自己知道你在做什么，看看你是否能找到你所缺少的东西。这是编程方法的第一条规则。至于添加响应元素，您的代码似乎仅限于静态站点。尝试添加更多可以操作的元素到网站的响应方面。

使页面响应的一种可靠方法是使用javascript，jquery，php等其他语言进行链接，具体取决于您希望项目执行的操作，但这超出了您的学习范围。

Answer 2

存在新的CSS3计量单位，称为vw和vh（＆＃39;视口宽度＆＃39;以及＆＃39;视口高度＆＃39;），非常适合整页布局。使用display: inline-block规则对此进行串联，您正在寻找的效果很容易实现。

首先，我们可以删除与flexbox布局有关的任何事情（因为这是CSS的一个高级部分，所以让我们开始时更简单一点）。

所以，1）删除这些<div>，因为他们不需要（只是div，而不是里面的内容）：

<div class="twosidescontainer">...</div>
<div class="twosides">...</div>

相应的CSS规则：

.twosidescontainer { ... }
.twosides { ... }

2）我们希望利用vh单位在CSS中使用高度，并删除不需要的样式：

.sideone {
    display: inline-block;
    vertical-align: top;  
    background-color: #3B3355;
    width: 50%;
    height: 100vh;
    //z-index: 2;
    //border-right: 45px solid #3B3355;
    //flex: auto;
    //max-width: 930px;
    //min-width: 900px;
    //justify-content: flex-start;
}

.sidetwo {
    display: inline-block;
    vertical-align: top;
    background: url(https://www.w3schools.com/w3images/fjords.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(3px);
    width: 50%;
    height: 100vh;
    //transform: scale(1.03);
    //background-size: 175% auto;   
    //z-index: 1;
    //max-width: 73em;
    //min-width: 73em;
    //justify-content: flex-end;
}

3）最后，我们想整理<h1>造型，以便集中在上半场：

h1 {
    color: #000505;
    display: block;
    font-size: 75px;
    text-align: center;
    //justify-content: center;
    //align-items: center;
    //margin-left: 175px;
}

正如您所看到的，通过宽度和高度调整窗口大小，布局仍然是50/50的分割，两者的宽度相等。检查here是否有小提琴。

使分屏布局响应

2 个答案: