Making split screen layout responsive

I have recently begun to learn HTML and CSS and for practice I have been creating portfolio websites. I know the site I have made right now isn't much, but I have a question regarding the splitscreen layout.

The question is: how can I make this responsive? By responsive I mean having the two sides equal in width and height no matter the screen size. I don't have much practice with responsive design. I know flexbox and that's about it. The two sections of the page are made in flexbox. I tried switching the units from px to ems, but that seemed to have no visible effect.

What would be the best way to make this responsive? Also what are some good resources for beginning to learn responsive design? Thanks.

Code: 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; }

The image to the right is just a placeholder I have a preferred image saved.

---

There exists new CSS3 units of measurement called vw and vh ('viewport width' and 'viewport height'), which are perfect for full page layouts. Tandem this with the display: inline-block rule and the effect you're looking for is easy to accomplish.

To start, we can strip out anything to do with the flexbox layout (as this is quite an advanced part of CSS, so let's keep things a bit more simple to start out with).

So, 1) Remove these <div> 's as they're not needed (just the divs, not the content inside):

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

And the corresponding CSS rules:

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

2) We want to leverage the use of the vh unit for height in CSS, and remove unneeded styles:

.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) And finally, we want to tidy up the <h1> styling to sit centrally in the first half:

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

As you can see, by resizing the window both by width and height, the layout remains a split 50/50 with equal width for both. Check here for the fiddle.

---

I would suggest learning any aspect of HTML or CSS from https://www.codecademy.com/. It is mostly free for beginners and a great resource to learn about what you seem to be asking. However, in the rest of the question, it seems to be unclear what you are asking. I would suggest cleaning up your code, adding some comments to let yourself know what you're doing, and see if you can find what you are missing. That is the first rule of programming methodology. As for adding responsive elements, your code seems limited to a static site. Try adding more elements that can be manipulated into responsive aspects of the site.

One sure way to make your page responsive is to link in another language like javascript, jquery, php, etc. depending on what you want the project to do, but this extends beyond what you are trying to learn.

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

上一篇: 我为什么要学习Lisp？

下一篇: 使分屏布局响应