CSS媒体自适应

标签：简单   scala   默认   min   宽度   最小   参数   客户   个人   

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媒体自适应

标签：简单   scala   默认   min   宽度   最小   参数   客户   个人   

原文地址：https://www.cnblogs.com/yumingzhao/p/10287380.html