制作分屏界面响应

-1

我最近开始学习HTML和CSS，并且练习我一直在创建作品集网站。我知道我现在所做的网站并不多，但我有一个关于分屏布局的问题。制作分屏界面响应

问题是：我如何使这种响应？无论屏幕大小如何，通过响应我的意思是让双方的宽度和高度相等。我对响应式设计没有多少实践。我知道flexbox，就是这样。该页面的两个部分由flexbox制成。我尝试将单位从px切换到ems，但似乎没有可见的效果。

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

.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; }

到右边的图像只是一个占位符我有一个喜欢的图像保存。

来源

2017-07-30 Kuebiko

存在称为vw和vh（'视口宽度'和'视口高度'）的新的CSS3度量单位，它们非常适合整页布局。用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宽度相同。检查here为小提琴。

来源

2017-07-31 11:29:36

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

让页面响应的一个确定方法是使用另一种语言（如javascript，jquery，php等）进行链接，具体取决于您希望项目执行的操作，但这超出了您尝试学习的内容。

来源

2017-07-30 23:32:57

制作分屏界面响应

回答

相关问题