关于CSS3复杂元素自动适配

心血来潮给BilibiliDownload写了个首页

用了之前写的css3skin做了2233娘(给自己点个赞...真好用233), 然而虽然是放上去了, 但因为是用纯css写的. 宽度什么的都是写死的..想要缩放只能用zoom来缩放整个div 而且定位也很麻烦

那么问题来了: 能不能不用js搞定这些

首先这俩的emmet是这样的(不知道emmet的去面壁):

.css3dskin.bili22>.css3dskin-profile>((.m>ul>li*6)+(.h>ul>li*6)+(.lh>ul>li*6)+(.rh>ul>li*6)+(.d>ul>li*6)+(.lf>ul>li*6)+(.rf>ul>li*6))
.css3dskin.bili33>.css3dskin-profile>((.m>ul>li*6)+(.h>ul>li*6)+(.lh>ul>li*6)+(.rh>ul>li*6)+(.d>ul>li*6)+(.lf>ul>li*6)+(.rf>ul>li*6))

在css3skin中已经给内部的元素上好了所有东西, 只要自己给换个贴图就完事了(我还稍微改了下动画)

这样丢到页面之后是能跑了...然而好小...ヽ(;▽;)ノ之前也说过了大小固定只能靠zoom

没办法, 先给加个基本的修正如下

.bili22,.bili33 {
    zoom: 2.5;
    position: absolute;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    z-index: -1;
    width: 0;
    height: 0;
    top: calc(20vh - 140px);
}
.bili22 { left: 8vw; }
.bili33 { right: 8vw; }

这里用的top: calc(20vh - 140px);正常应该是50vh-xx 不过因为zoom的关系是要乘以2.5的(坑), 将宽高都设为0是为了防止使用position: absolute;排版时左右不对称, 最后就是左右的定位

接下来就是体力活了 因为zoom没有可以自动的可能性只能手动写条件 于是像下面这种代码就出现了

@media screen and (max-width: 1024px) { blabla... }
@media screen and (max-width: 640px) { blabla... }
...

好累..其实我用js多好 为何要找虐呢((´•̥̥̥ω•̥̥̥`)

顺便一提那个输入框

也没啥技术含量就是各种各种的动画...然而又是vh又是em又是calc的我都快晕了

整个写下来完全不管兼容性了 总之chromium内核的浏览器能跑就行了233

于是你可以看到IE上的平板2233 (因为不支持transform-style: preserve-3d;) 我整个人都233了hhhh

pa001024

继续阅读此作者的更多文章