媒体类型 all screen print
<link type="text/css" rel="stylesheet" href="style.css" media="only screen and (max-width:640px)">
@media screen and (max-width: 600px) {}
------------------------------------------
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
------------------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1">
img{max-width:100%;}
inline-block + text-align
子元素：inline-lock
父元素：text-align:center;
- column-width:auto | <length>px /* 列宽 */
- column-count:1~n;/* 列数 */
Flex布局的主要思想是让容器能使其子元素的宽高（或其他属性）能够以最好的方式去填充可用空间（主要是去适应不同的设备跟分辨率）。
Flexbox布局常用于小的应用程序组件之中 能动态修改子元素宽高，以满足在不同尺寸屏幕下的恰当布局