前端布局学习
Posted boykait
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端布局学习相关的知识,希望对你有一定的参考价值。
- 杭州出差中,项目要做大屏展示,据说到时候是4块1920*1080的显示屏进行展示,这几天一直苦想到底如何进行屏幕适配呢,探索了一两天,决定用媒体查询结合比例计算来进行页面设计,以便于全屏、屏幕放大缩小的正常展示,学着写了个demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏测试</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: greenyellow;
}
.header {
width: calc(100% - 4px);
height: 100px;
background-color: black;
border: 2px solid greenyellow;
}
/*媒体查询操作*/
@media screen and (min-width: 640px) and (max-width: 1920px) {
.left {
width: calc(25% - 14px);
height: calc(100% - 14px);
border: 2px solid greenyellow;
margin: 5px;
float: left;
}
.center {
width: calc(50% - 14px);
height: calc(100% - 14px);
border: 2px solid greenyellow;
margin: 5px;
float: left;
}
.right {
width: calc(25% - 14px);
height: calc(100% - 14px);
border: 2px solid greenyellow;
margin: 5px;
float: left;
}
}
@media screen and (min-width: 200px) and (max-width: 640px) {
.left {
width: calc(100% - 14px);
height: calc(100% - 14px);
border: 2px solid greenyellow;
margin: 5px;
}
.center {
width: calc(100% - 14px);
height: calc(100% - 14px);
border: 2px solid greenyellow;
margin: 5px;
}
.right {
width: calc(100% - 14px);
height: calc(100% - 14px);
border: 2px solid greenyellow;
margin: 5px;
}
}
.main {
width: 100%;
height: calc(100% - 106px);
background-color: #000000;
}
.sub-left {
width: calc(100% - 14px);
height: calc(50% - 14px);
border: 2px solid greenyellow;
margin: 5px;
float: left;
}
.sub-right {
width: calc(100% - 14px);
height: calc(50% - 14px);
border: 2px solid greenyellow;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div class="left">
<div class="sub-left">
</div>
<div class="sub-left">
</div>
</div>
<div class="center">
</div>
<div class="right">
<div class="sub-right">
</div>
<div class="sub-right">
</div>
</div>
</div>
</body>
</html>
展示效果
以上是关于前端布局学习的主要内容,如果未能解决你的问题,请参考以下文章
如何通过单击片段内的线性布局从片段类开始新活动?下面是我的代码,但这不起作用