1 Diseño de consulta de medios
Los problemas de diseño de página y centrado de cuadros son preguntas comunes sobre CSS en las preguntas de la entrevista de front-end.
Lea atentamente el archivo de estilo a continuación. Hay instrucciones detalladas en el archivo:
1.1 El primer tipo: establezca el ancho de acuerdo con la pantalla del dispositivo para realizar el diseño de la página
<!--
一、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 El segundo diseño de disposición 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>
Diseño de diseño de página de 2 porcentajes
/*
首先设置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>
Diseño de diseño flexible 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>