关于移动端swiper的2种样式重置
手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~
思路:主要考虑选择器优先级大于默认就可以随意撸码
注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也就那么几行。可以参考:地址
下面附上重置样式的代码
.top_banner{ margin-top: .05rem; width: 100%; height: 2.8rem; position: relative; } .top_bannerlists a,.top_bannerlists img{ display: block; width: 100%; } .swiper-container-horizontal>#bannerimg-pagination{ position: absolute; display: block; width: 225px; margin: 0 auto; margin-left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -10px; } #bannerimg-pagination span{ width: 25%; height: 8px; background-color: #3879D9; border-radius: 5px; } /*----------top_three-----------*/ .top_three{ margin-top: .1rem; } /*swiper重置*/ .experts_carousel{ position: relative; } #swiper-pagination{ position: absolute; margin: 0 auto; margin-left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -.3rem; } #swiper-pagination span{ display: block; width: .2rem; height: .2rem; margin-left: .15rem; }
-----------------------------------------------------------------------小二给我来二两轮子!