有时候你需要把同一个页面在手机和pc同时打开,其中有一个办法就是判断不同分辨路加载不同的css
小编总结了几种分别加载css的方法:
1.比较复杂的使用js判断加载不同css (亲测可用)
但是这种方法只有最开始的时候会判断,如果你拖动浏览器大小是不会发生改变的(当然如果喜欢拖着玩的话)
1 2
2.比较简单帅气的用媒体查询加载对应css
会随着你的拖动窗口大小而执行
//其中 media 是媒体查询的范围,当最大宽度是1200,这里就是手机平板一下的尺寸 加载手机css ,反之电脑css
3.当然还有最刺激的方式,那就是直接媒体查询然后写样式
1 @media only screen and (max-width: 1024px) { 2 .div1{ 3 width:50%; 4 } 6 .div2{ 7 width:50%; 8 }10 .div3 {11 width:50%;12 }13 }14 15 @media only screen and (min-width: 1024px) {16 .div1{17 width:100%;18 }20 .div2{21 width:100%;22 }24 .div3 {25 width:100%;26 }27 }
当然要做ie兼容的宝贝们,媒体查询是不支持ie9以下的(暂时是这样),当然可以依靠第三方的兼容方式