对本博客手机样式小修改以及学到的css3小技巧

    本博的前端UI由于有国外wordpress皮肤修改而来,本来就是响应试,所有对手机兼容性还是挺好的,下面说说之前的几个问题!

首先:没有禁止缩放,所以在左右移动页面的时候会有些晃动!

解决办法:user-scalable=no

<meta content="width=device-width,user-scalable=no" name="viewport">

其次:是几个小细节的调整

这上面存在着三个问题,我已经标明。

第一个分页的解决方案是:在小屏幕时将分页只显示<上一页和下一页>

@media screen and (max-width:460px) {
    #qrcode, .pagination ul li:not(:first-child){
        display: none;
    }
    .pagination ul li:last-child{
        display: inline-block;
    }
}

这里用到了几个css3伪类 not,first-child和last-child,在这顺便也把二维码的问题给解决了!

关于ios默认buttion圆角的问题google到了解决方案:

#search_submit{
    -webkit-appearance: none;
    -webkit-border-radius: 2px;
}

关键的是一句为:-webkit-appearance: none;

欲知现在的效果如何,可以拿起你得手机扫描左下角的二维码便知,Thanks!

捐助共勉
版权声明:若无特殊注明,本文皆为原创,转载请保留文章出处。