使分屏布局响应

2018-06-21 16:47:52

我最近开始学习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; }

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

存在称为vw和vh （'视口宽度'和'视口高度'）的新的CSS3度量单位，这对于整个页面布局来说是完美的。与display: inline-block串联display: inline-block规则和您正在寻找的效果很容易完成。

首先，我们可以去掉任何与flexbox布局有关的事情（因为这是CSS的一个高级部分，所以让我们继续前进一点）。

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

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

和相应的CSS规则：

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

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

.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的分割，两者的宽度相等。检查这里的小提琴。

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

一种确保你的页面响应的方法是根据你想要项目做什么来链接另一种语言，比如javascript，jquery，php等，但是这超出了你想学的东西。

链接地址: http://www.djcxy.com/p/60925.html

上一篇: Making split screen layout responsive

下一篇: Responsive AdSense Units Break Layout On Window Resize: How To Fix?