css的媒体自适应 @media 用来兼容移动设备的展示效果 个人理解 把它当做css的一种判断 当一个容器的高度达到一个值的时候给他赋上对应的css样式
这里边有几个参数：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
具体写了一段代码：简单意思意思
<style>
???/* 手机等小屏幕手持设备 */
???@media screen and (min-width: 320px) and (max-width: 480px) {
???????.cover-image{
???????????height:150px;
???????}
??????
???}
???/* 平板之类的宽度 1024 以下设备 */
???@media only screen and (min-width: 321px) and (max-width: 1024px) {
???????.cover-image{
???????????height:200px;
???????}
???}
???/* PC客户端或大屏幕设备: 1028px 至更大 */
???@media only screen and (min-width: 1029px) {
??????.cover-image {
???????????height:450px;
???????}
???}
</style>
CSS媒体自适应
原文地址：https://www.cnblogs.com/yumingzhao/p/10287380.html