1媒体查询布局
页面布局以及盒子居中问题是前端面试题中对于css的常见问题
请仔细看下方样式文件,文件中有详细说明介绍:
1.1 第一种:根据设备屏幕来设置宽度,实现页面布局
<!--
一、PC端与H5转换的必要信息
v1. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
v2. <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta 标签固定的默认信息
二、meta 参数信息大全及含义:
v1. viewport 视口(layout viewport 布局视口),设定页面渲染中的一些规则
v2. content(规则内容):
2.1 width=device-width:让页面渲染的宽度和设备宽度保持一致
2.2 initial-scale=1.0 :初始缩放比例1:1
2.3 maximum-scale=1.0: 最大缩放比例1:1 (适配一些低版本安卓,如果不加user-scalable禁止会失效)
2.4 minimum-scale=1.0: 最小缩放比例1:1 (适配一些低版本安卓,如果不加user-scalable禁止会失效)
2.5 user-scalable=no:是否可对页面进行缩放,no 禁止缩放
-->
html {
width: 100%;
height: 100%;
/* 根字体大小 */
font-size: 16px;
}
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: azure;
}
.person {
width: 40%;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: aqua;
}
/* 第一种:根据设备屏幕来设置宽度,实现页面布局 */
/*
@media screen and (max-width: 500px) {
body {
background-color: rgb(247, 202, 243);
}
.person {
width: 30px;
background-color: rgb(255, 102, 0);
}
}
*/
<body>
<div class="person">媒体查询布局</div>
</body>
1.2第二种,rem布局设计:
<script>
/* 第二种:rem布局 */
function computedREM() {
let HTML = document.documentElement;
winW = HTML.clientWidth || document.body.clientWidth;;
HTML.style.fontSize = winW / 1920 * 100 + 'px';
}
// 进入时执行computedREM
computedREM();
// 当浏览器窗口大小发生改变的时候执行computedREM
window.addEventListener('resize', computedREM);
</script>
2百分比页面布局设计
/*
首先设置html,body,使其与屏幕设备大小一致,后面的盒子宽高按比例设计
*/
html,
body {
width: 100%;
/*height: 100%;*/
padding: 0;
margin: 0;
background-color: aliceblue;
}
#ids {
height: 30%;
background-color: aqua;
}
.header {
height: 20%;
background-color: rgb(241, 163, 228);
}
<body>
<div id="ids">
<div class="header">11</div>
<div class="center">22</div>
<div class="footer">33</div>
</div>
</body>
3flex弹性布局设计
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: aliceblue;
}
#ids {
height: 60%;
display: flex;
/* 大于自身宽度,子级盒子换行显示 */
flex-wrap: wrap;
justify-content: space-between;
background-color: aqua;
}
.header,
.center,
.footer {
flex: 0 0 33%;
height: 20%;
background-color: rgb(235, 243, 198);
}
.center {
background-color: rgb(241, 163, 228);
}
<body>
<div id="ids">
<div class="header">11</div>
<div class="center">22</div>
<div class="footer">33</div>
</div>
</body>