具有响应式设计的旋转元素
Rotated Elements with responsive design
我正在尝试创建一个 90 度旋转的布局。但问题是我以前使用的方法 none 在这种情况下有效。由于它是旋转的,改变大小,使其响应似乎不起作用。
我试图让“我的项目”标题占据旋转屏幕的一半,另一半将包含
图像和容器。
谁能帮我解决这个问题?我如何确保它调整大小并且放置始终是 half:half 布局而不会在不同设备大小的调整大小时溢出。请给我提示以完成我的工作。谢谢!
Link to the code in jsfiddle.
下面是 link 我的想法:
https://jsfiddle.net/7tfy4gdh/1/
这是我要构建的内容:https://prnt.sc/10wb1p7
想到这一点的一种方法是将所有内容设计为好像它没有旋转并且容器具有宽度 100vh 和高度 100vw。然后,当一切就绪后,将容器旋转 90 度并平移它,使其完全适合视口。
为确保全部响应,请尽可能使用相对单位。所以将宽度和高度设置为 %s。考虑填充,可能根据 vmin 定义它,您可能还想相对地定义字体大小,以便它在更大的屏幕上增长。
所以,首先实现这个:
此代码段启动该过程,定义左侧 div 和右侧 div,将每个的主要组件居中并旋转和平移容器。这不是完整的工作,徽标方面需要更多工作 - 您可能会发现在 %s 等中定义所有内容最好不要使用 flex,而是自己控制整个 space 的使用。
请记住,旋转的东西并不意味着它的高度变成垂直边...
下面是一些开始的代码:
<head>
<style>
* {
box-sizing: border-box;
margin:0;
padding: 0;
overflow: visible;
}
body {
width: 100vw;
height: 100vh;
overflow: visible;
}
.container {
text-align: center;
width: 100vh;
height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .left-side {
position: relative;
width: 50vh;
height: 100vw;
float: left;
}
.container .left-side .project-title {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .project-title span {
text-align: center;
}
.container .right-side {
position: relative;
top: 0;
width: 50vh;
height: 100vw;
float: left;
padding: 1vmin;
}
.container .right-side .control {
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
rmax-width: 450px;
rmin-width: 350px;
height: 80%;
width: 80%;
background-color: red;
padding: 5%;
}
.control .logo {
height: 25%;
}
.control .logo img {
width:100px;
height: 100%;
width: auto;
}
.logo-container {
flex:1;
display:flex;
margin-top: 5%;
height: 30%;
}
.logo-maker{
flex:1;
padding:25px 10px;
background-color: #ccc;
color:#ffffff;
border-radius: 8px;
padding-top: 15px;
}
.logo-maker .maker-contain {
width:50px;
background-color: #ccc;
border-radius: 8px;
padding:5px;
padding-bottom: 0;
margin:auto;
}
.logo-maker .maker-contain img{
width:100%;
}
.logo-maker h3 {
margin-top: 15px;
}
.earn-coin {
flex:1;
text-align: center;
padding:25px 0;
padding-top: 15px;
margin-left: 5px;
border-radius: 8px;
background-color: #ccc;
box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-webkit-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-moz-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
}
.earn-coin img {
width:40px;
margin:auto;
}
.earn-coin h3{
margin-top: 15px;
}
.footer {
padding:20px 30px;
padding-left: 55px;
background-color: #ccc;
background-color: purple;
height: 25%;
color:#ffffff;
border-radius: 5px;
margin-top: 5%;
text-align: left;
}
.footer i{
font-size:35px;
}
.footer h3 {
display: inline;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="project-title">
<h2>
My Project
</h2>
</div>
</div>
<div class="right-side">
<div class="control">
<div class="logo">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/lion-fire-logo-design-template-free-89daa14626ac403bd3cf6282036663ff_screen.jpg?ts=1572094154">
</div>
<section class="logo-container">
<div class="logo-maker">
<div class="maker-contain">
<img src="https://www.logaster.com/blog/wp-content/uploads/2018/05/LogoMakr.png" alt="">
</div>
<h3>Build Logo</h3>
</div>
<div class="earn-coin">
<div class="coin-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEWIhIZ48jnuWwHjIZ9I_EpQbRsHrFtomThQ&usqp=CAU">
</div>
<h3>Earn Coins</h3>
</div>
</section>
<div class="footer">
<i class="fa fa-bell"></i>
<h3>
Build by Dave ___
</h3>
</div>
</div>
</div>
</div>
</body>
我正在尝试创建一个 90 度旋转的布局。但问题是我以前使用的方法 none 在这种情况下有效。由于它是旋转的,改变大小,使其响应似乎不起作用。
我试图让“我的项目”标题占据旋转屏幕的一半,另一半将包含 图像和容器。
谁能帮我解决这个问题?我如何确保它调整大小并且放置始终是 half:half 布局而不会在不同设备大小的调整大小时溢出。请给我提示以完成我的工作。谢谢!
Link to the code in jsfiddle.
下面是 link 我的想法: https://jsfiddle.net/7tfy4gdh/1/
这是我要构建的内容:https://prnt.sc/10wb1p7
想到这一点的一种方法是将所有内容设计为好像它没有旋转并且容器具有宽度 100vh 和高度 100vw。然后,当一切就绪后,将容器旋转 90 度并平移它,使其完全适合视口。
为确保全部响应,请尽可能使用相对单位。所以将宽度和高度设置为 %s。考虑填充,可能根据 vmin 定义它,您可能还想相对地定义字体大小,以便它在更大的屏幕上增长。
所以,首先实现这个:
此代码段启动该过程,定义左侧 div 和右侧 div,将每个的主要组件居中并旋转和平移容器。这不是完整的工作,徽标方面需要更多工作 - 您可能会发现在 %s 等中定义所有内容最好不要使用 flex,而是自己控制整个 space 的使用。
请记住,旋转的东西并不意味着它的高度变成垂直边...
下面是一些开始的代码:
<head>
<style>
* {
box-sizing: border-box;
margin:0;
padding: 0;
overflow: visible;
}
body {
width: 100vw;
height: 100vh;
overflow: visible;
}
.container {
text-align: center;
width: 100vh;
height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .left-side {
position: relative;
width: 50vh;
height: 100vw;
float: left;
}
.container .left-side .project-title {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .project-title span {
text-align: center;
}
.container .right-side {
position: relative;
top: 0;
width: 50vh;
height: 100vw;
float: left;
padding: 1vmin;
}
.container .right-side .control {
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
rmax-width: 450px;
rmin-width: 350px;
height: 80%;
width: 80%;
background-color: red;
padding: 5%;
}
.control .logo {
height: 25%;
}
.control .logo img {
width:100px;
height: 100%;
width: auto;
}
.logo-container {
flex:1;
display:flex;
margin-top: 5%;
height: 30%;
}
.logo-maker{
flex:1;
padding:25px 10px;
background-color: #ccc;
color:#ffffff;
border-radius: 8px;
padding-top: 15px;
}
.logo-maker .maker-contain {
width:50px;
background-color: #ccc;
border-radius: 8px;
padding:5px;
padding-bottom: 0;
margin:auto;
}
.logo-maker .maker-contain img{
width:100%;
}
.logo-maker h3 {
margin-top: 15px;
}
.earn-coin {
flex:1;
text-align: center;
padding:25px 0;
padding-top: 15px;
margin-left: 5px;
border-radius: 8px;
background-color: #ccc;
box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-webkit-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-moz-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
}
.earn-coin img {
width:40px;
margin:auto;
}
.earn-coin h3{
margin-top: 15px;
}
.footer {
padding:20px 30px;
padding-left: 55px;
background-color: #ccc;
background-color: purple;
height: 25%;
color:#ffffff;
border-radius: 5px;
margin-top: 5%;
text-align: left;
}
.footer i{
font-size:35px;
}
.footer h3 {
display: inline;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="project-title">
<h2>
My Project
</h2>
</div>
</div>
<div class="right-side">
<div class="control">
<div class="logo">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/lion-fire-logo-design-template-free-89daa14626ac403bd3cf6282036663ff_screen.jpg?ts=1572094154">
</div>
<section class="logo-container">
<div class="logo-maker">
<div class="maker-contain">
<img src="https://www.logaster.com/blog/wp-content/uploads/2018/05/LogoMakr.png" alt="">
</div>
<h3>Build Logo</h3>
</div>
<div class="earn-coin">
<div class="coin-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEWIhIZ48jnuWwHjIZ9I_EpQbRsHrFtomThQ&usqp=CAU">
</div>
<h3>Earn Coins</h3>
</div>
</section>
<div class="footer">
<i class="fa fa-bell"></i>
<h3>
Build by Dave ___
</h3>
</div>
</div>
</div>
</div>
</body>