技术支持
好物推荐

通过媒体查询加载对应css的两种常用方法

方法一:媒体查询加载对应css

//其中 media 是媒体查询的范围,当最大宽度是1200,这里就是手机平板一下的尺寸 加载手机css ,反之电脑css
<link rel="stylesheet" type="text/css" href="../css/m_wuqinglan.css" media="screen and (max-width:1200px)"/>

<link rel="stylesheet" type="text/css" href="../css/pc_wuqinglan.css" media="screen and (min-width:1201px)"/>

方法二:直接媒体查询然后写样式

@media only screen and (max-width: 1024px) {
    .div1{
        width:50%;
    }
    .div2{
        width:50%;
    }
    .div3 {
        width:50%;
    }
}

@media only screen and (min-width: 1024px) {
    .div1{
        width:100%;
    }
    .div2{
        width:100%;
    }
    .div3 {
        width:100%;
    }
}


微信扫描下方的二维码阅读本文

未经允许不得转载:桔子雨 » 通过媒体查询加载对应css的两种常用方法
分享到: 生成海报
一个数字化服务提供商

承接外贸建站,工具软件,行业软件定制

部分产品联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码