前端小知识（5）--响应式页面实现
响应式页面实现
注意：不考虑IE8以下的浏览器。
设置 Meta 标签
大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。当年，iPhone出现的时候，因为大多数网站没有移动端的解决方案，移动端会自动缩放页面，设置viewpoint就是告诉设备，该网页支持响应式，无需缩放网页。
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) {}
字体
如果将字体大小设置为固定px的话，那么显然无法兼容PC端和移动端，建议使用相对字体大小。
解决方案
在html中设置字体大小，然后其余地方全部采用rem，在适应不同像素屏幕的时候，修改html中的font-size就可以了。可以参看demo中的代码。当然，IE8以下不兼容rem。
Demo
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>自适应列表</title>
<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;
}
html {
font-size: 10px;
}
body {
min-width: 250px;
}
h1 {
text-align: center;
margin-top: 40px;
font-size: 3.6rem;
}
.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: 6rem;
transform: rotate(-45deg);
font-size: 2.6rem;
background: none;
}
.item-text{
font-size: 1.6rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-align: left;
}
@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%;
}
html {
font-size: 9px;
}
}
@media only screen and (max-width: 499px) {
.item{
max-width: 100%;
}
html {
font-size: 8px;
}
}
</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>
一个响应式的数据面板demo https://nju_clc.gitee.io/big-data-integration-and-application/#/
