html - 如何更改我的代码以使其更具响应性?
问题描述
我目前正在建立我的第一个网站。我在中间有一个按钮,上面有一些文字。我没有得到 100% 正确的响应式设计。我添加了一些媒体查询以使设计适应不同的浏览器大小。最大的问题是当我放大整个布局时会搞砸。也许您可以快速查看我的代码并给我一些提示。
body,
html {
min-height: 100%;
}
body {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
height: 100%;
overflow: hidden;
}
.bild {
background-repeat: no-repeat;
background-size: cover;
}
#caption {
font-size: 14px;
margin-left: 3%;
font-family: 'Quicksand', sans-serif;
}
#main-footer {
width: 100%;
height: 40px;
background-color: #0005;
position: fixed;
left: 0;
bottom: 0;
line-height: 10px;
padding-left: 3%;
}
#main-footer p {
font-family: 'Quicksand', sans-serif;
float: left;
}
#main-footer a {
font-family: 'Quicksand', sans-serif;
float: right;
color: #fff;
padding-right: 5%;
text-decoration: none;
margin-top: 16px;
}
#spruchErstellen {
font-family: 'Architects Daughter', cursive;
text-align: center;
margin-top: 25%;
font-size: 45px;
margin-left: 25%;
margin-right: 25%;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
position: relative;
}
.block {
width: 100%;
font-size: 30px;
position: relative;
}
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% -50%);
margin-top: -40px;
margin-left: -120px;
font-family: 'Architects Daughter', cursive;
}
.button {
background: none;
color: #ccc;
width: 240px;
height: 80px;
border: 2px solid #fff;
font-size: 24px;
border-radius: 4px;
transition: .6s;
overflow: hidden;
font-style: bold;
color: #fff;
}
button:focus {
outline: none;
}
button:before {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, .5);
width: 60px;
height: 100%;
left: 0;
top: 0;
opacity: .5s;
filter: blur(30);
transform: translateX(-130px) skewX(-15deg);
}
button:after {
content: '';
display: block;
position: absolute;
background: rgba(255, 255, 255, .2);
width: 30px;
height: 100%;
left: 30px;
top: 0;
opacity: 0;
filter: blur (30px);
transform: translate(-100px) scaleX(-15deg);
}
button:hover {
background: #cc0000;
cursor: pointer;
}
button:hover:before {
transform: translateX(300px) skewX(-15deg);
opacity: .6;
transition: .7s;
}
button:hover:after {
transform: translateX(300px) skewX(-15deg);
opacity: 1;
transition: .7s;
}
@media only screen and (min-width:1101px) {
#spruchErstellen {
font-family: 'Architects Daughter', cursive;
text-align: center;
margin-top: 7%;
font-size: 45px;
margin-left: 25%;
margin-right: 25%;
line-height: 50px;
}
.button {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50% -50%);
margin-top: -40px;
margin-left: -120px;
}
}
我有媒体查询,但我没有插入所有内容以使代码更清晰。正如我已经提到的,我想让它更具响应性。
解决方案
尽量避免使用 px。尝试使用 %。
此外,您可以使用像 Bootstrap 这样的 CSS 框架来为您做这件事:https ://getbootstrap.com/
推荐阅读
- ios - 针对特定于 iOS 平台的 Angular 和 Cordova 的路由器问题
- r - 从 R linux 服务器导出压缩文件时出错
- node.js - 如何在速度方面提高 MERN 堆栈效率?
- python - Pandas:为每个组重新采样每小时数据
- android - Galaxy s10 (xxxhdpi) 是 4 倍还是 3.5 倍?
- reactjs - React Navigation 将 props 传递给类组件
- python - 序列中最大的 3 个数字
- laravel - 雄辩的 JSON 列上的选择查询
- python - Tensorflow 错误“ImportError:DLL 加载失败,错误代码为 1073741795”
- html - 如何使用 css 为身体的背景图像设置动画