自适应页面实现
设置 Meta 标签
大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：和 width 相对应，指定高度，基本上不会用到
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例，可以为小数
minimum-scale：允许用户缩放到的最小比例，可以为小数
user-scalable：用户是否可以手动缩放，值为”no”或”yes”，no 代表不允许，yes代表允许
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
通过媒介查询来设置样式
@media
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype的具体值可以参考 w3c
例如：
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
Demo
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>自适应列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css" rel="stylesheet">
<style>
* {
padding: 0;
margin: 0;
font-family: 'montserrat', sans-serif;
background: #333;
color: #ddd;
box-sizing: border-box;
}
h1 {
text-align: center;
margin-top: 40px;
}
.content{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: left;
padding: 30px 40px;
}
.item{
max-width: 25%;
padding: 10px;
text-align: center;
color: #ddd;
}
.item-icon{
display: inline-block;
width: 70px;
height: 70px;
border: 3px solid #82ccdd;
color: #82ccdd;
transform: rotate(45deg);
margin-bottom: 30px;
margin-top: 16px;
transition: 0.3s linear;
}
.item:hover .item-icon{
background: #82ccdd;
color: #ddd;
}
.item-icon i {
line-height: 60px;
transform: rotate(-45deg);
font-size: 26px;
background: none;
}
.item-text{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.item{
max-width: 33.3%;
}
}
@media only screen and (min-width: 500px) and (max-width: 767px) {
.item{
max-width: 50%;
}
}
@media only screen and (max-width: 499px) {
.item{
max-width: 100%;
min-width: 250px;
}
}
</style>
</head>
<body>
<h1>自适应布局</h1>
<div class="content">
<div class="item">
<div class="item-icon">
<i class="fa fa-dolly-flatbed"></i>
</div>
<div class="item-text">
唱彻《阳关》泪未干，功名馀事且加餐。浮天水送无穷树，带雨云埋一半山。
今古恨，几千般，只应离合是悲欢？江头未是风波恶，别有人间行路难！
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-directions"></i>
</div>
<div class="item-text">
少年不识愁滋味，爱上层楼。爱上层楼，为赋新词强说愁。
而今识尽愁滋味，欲说还休。欲说还休，却道“天凉好个秋”！
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-location-arrow"></i>
</div>
<div class="item-text">
何处望神州？满眼风光北固楼。千古兴亡多少事？悠悠。不尽长江滚滚流。
年少万兜鍪，坐断东南战未休。天下英雄谁敌手？曹刘。生子当如孙仲谋。
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-dog"></i>
</div>
<div class="item-text">
一轮秋影转金波，飞镜又重磨。把酒问姮娥：被白发，欺人奈何？
乘风好去，长空万里，直下看山河。斫去桂婆娑，人道是，清光更多。
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-mail-bulk"></i>
</div>
<div class="item-text">
晚日寒鸦一片愁。柳塘新绿却温柔。若教眼底无离恨，不信人间有白头。
肠已断，泪难收。相思重上小红楼。情知已被山遮断，频倚阑干不自由。
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-dove"></i>
</div>
<div class="item-text">
醉里且贪欢笑，要愁那得工夫。近来始觉古人书，信著全无是处。
昨夜松边醉倒，问松我醉何如。只疑松动要来扶，以手推松曰去。
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-archway"></i>
</div>
<div class="item-text">
壮岁旌旗拥万夫，锦襜突骑渡江初。燕兵夜娖银胡䩮，汉箭朝飞金仆姑。
追往事，叹今吾，春风不染白髭须。却将万字平戎策，换得东家种树书。
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-dumbbell"></i>
</div>
<div class="item-text">
绿树听鹈鴂。更那堪、鹧鸪声住，杜鹃声切。啼到春归无寻处，苦恨芳菲都歇。算未抵、人间离别。马上琵琶关塞黑，更长门、翠辇辞金阙。看燕燕，送归妾。
将军百战身名裂。向河梁、回头万里，故人长绝。易水萧萧西风冷，满座衣冠似雪。正壮士、悲歌未彻。啼鸟还知如许恨，料不啼清泪长啼血。谁共我，醉明月。
</div>
</div>
<div class="item">
<div class="item-icon">
<i class="fa fa-swimmer"></i>
</div>
<div class="item-text">
绕床饥鼠，蝙蝠翻灯舞。屋上松风吹急雨，破纸窗间自语。
平生塞北江南，归来华发苍颜。布被秋宵梦觉，眼前万里江山。
</div>
</div>
</div>
</body>
</html>