html { font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% } html,body { -webkit-user-select:none; user-select:none; width:100% } html,body,p,object,,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress { margin:0; padding:0; border:0; vertical-align:baseline } a { text-decoration:none; -webkit-touch-callout:none; background-color:transparent } li { list-style:none } article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display:block } audio,canvas,progress,video { display:inline-block } audio:not([controls]) { display:none; height:0 } [hidden],template { display:none } a:active,a:hover { outline:0 } abbr[title] { border-bottom:1px dotted } b,strong { font-weight:bold } dfn { font-style:italic } h1 { font-size:2em; margin:.67em 0 } small { font-size:80% } sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline } sup { top:-0.5em } sub { bottom:-0.25em } img { border:0; -webkit-touch-callout:none; } svg:not(:root) { overflow:hidden } figure { margin:1em 40px } hr { -moz-box-sizing:content-box; box-sizing:content-box; height:0 } pre { overflow:auto } code,kbd,pre,samp { font-family:monospace,monospace; font-size:1em } a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); } button,input,optgroup,select,textarea { color:inherit; font:inherit; margin:0; -webkit-appearance:none; outline:none; line-height:normal } button { overflow:visible } button,select { text-transform:none } button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance:button; cursor:pointer } button[disabled],html input[disabled] { cursor:default } button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0 } input,textarea { outline:none; border:none; } input { line-height:normal } input[type="checkbox"],input[type="radio"] { box-sizing:border-box; padding:0 } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height:auto } input[type="search"] { -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance:none } fieldset { border:1px solid silver; margin:0 2px; padding:.35em .625em .75em } legend { border:0; padding:0 } textarea { overflow:auto } optgroup { font-weight:bold } table { border-collapse:collapse; border-spacing:0 } td,th { padding:0 } /*轮播块*/ .Banner { width:100%; position:relative; } .Banner .B-img { width:100%; overflow:hidden; } .Banner .B-img ul { width:1000%; } .Banner .B-img ul li { float:left; } .Banner .B-img ul li img { width:10rem; height:6.65625rem; } .Banner .B-dir { width:100%; height:0.625rem; position:absolute; bottom:0.3125rem; z-index:10; } .Banner .B-dir ul { display:flex; justify-content:center; align-items:center; overflow:hidden; height:0.625rem; } .Banner .B-dir ul li { margin-left:0.3125rem; width:0.375rem; height:0.375rem; background-color:white; border-radius:50%; } .Banner .B-dir ul li.on { background-color:#00A0EA; }
利用rem特性,用js做适配.. 移动端轮播