1.引入阿里巴巴 移动终端框架 flexable.js
2.引入 base.css
3. 使用rem 单位
base.css:
html,body,div,p,span,em,a,img,ul,li,img,h1,h2,h3,h4,h5,h6,input,textarea,button{ padding: 0; margin: 0; border: 0 none;} em,i{ font-style: normal; } a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); } button,input,textarea{ -webkit-user-modify:read-write-plaintext-only; } input,textarea{ -webkit-appearance: none;} input[type=number] { -moz-appearance:textfield; } input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; } a:hover{ text-decoration: none !important;} html,body{ font-family: Arial,Microsoft YaHei !important;-webkit-overflow-scrolling: touch;} /*public*/ /*字体大小设置*/ /*750下16px*/ [data-dpr="1"] .font16 { font-size: 8px; } [data-dpr="2"] .font16 { font-size: 16px; } [data-dpr="3"] .font16 { font-size: 24px; } /*750下18px*/ [data-dpr="1"] .font18 { font-size: 11px; } [data-dpr="2"] .font18 { font-size: 20px; } [data-dpr="3"] .font18 { font-size: 29px; } /*750下20px*/ [data-dpr="1"] .font20 { font-size: 12px; } [data-dpr="2"] .font20 { font-size: 22px; } [data-dpr="3"] .font20 { font-size: 32px; } /*750下22px*/ [data-dpr="1"] .font22 { font-size: 13px; } [data-dpr="2"] .font22 { font-size: 24px; } [data-dpr="3"] .font22 { font-size: 35px; } /*750下26px*/ [data-dpr="1"] .font26 { font-size: 15px; } [data-dpr="2"] .font26 { font-size: 28px; } [data-dpr="3"] .font26 { font-size: 41px; } /*750下24px*/ [data-dpr="1"] .font24 { font-size: 14px; } [data-dpr="2"] .font24 { font-size: 26px; } [data-dpr="3"] .font24 { font-size: 38px; } /*750下28px*/ [data-dpr="1"] .font28 { font-size: 16px; } [data-dpr="2"] .font28 { font-size: 30px; } [data-dpr="3"] .font28 { font-size: 44px; } /*750下30px*/ [data-dpr="1"] .font30 { font-size: 17px; } [data-dpr="2"] .font30 { font-size: 32px; } [data-dpr="3"] .font30 { font-size: 47px; } /*750下32px*/ [data-dpr="1"] .font32 { font-size: 18px; } [data-dpr="2"] .font32 { font-size: 34px; } [data-dpr="3"] .font32{ font-size: 50px; } /*750下34px*/ [data-dpr="1"] .font34 { font-size: 18px; } [data-dpr="2"] .font34 { font-size: 36px; } [data-dpr="3"] .font34{ font-size: 54px; } /*750下40px*/ [data-dpr="1"] .font40 { font-size: 20px; } [data-dpr="2"] .font40 { font-size: 40px; } [data-dpr="3"] .font40{ font-size: 60px; } /*750下42px*/ [data-dpr="1"] .font42 { font-size: 23px; } [data-dpr="2"] .font42 { font-size: 44px; } [data-dpr="3"] .font42{ font-size: 65px; } /*750下48px*/ [data-dpr="1"] .font48 { font-size: 21px; } [data-dpr="2"] .font48 { font-size: 42px; } [data-dpr="3"] .font48{ font-size: 63px; } /*750下60px*/ [data-dpr="1"] .font60 { font-size: 30px; } [data-dpr="2"] .font60 { font-size: 60px; } [data-dpr="3"] .font60{ font-size: 90px; } /*750下68px*/ [data-dpr="1"] .font68 { font-size: 34px; } [data-dpr="2"] .font68 { font-size: 68px; } [data-dpr="3"] .font68{ font-size: 102px; } /*背景色*/ .bgcolor1{ background: #f5f5f5;} .bgcolor2{ background: #ffffff;} .bgcolor3{ background: #eff3f5;} /*border*/ .border1bottom{ border-bottom: 1px solid #bec8d0;} /*弹窗cover*/ .cover{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 10rem; background: url(../images/cover_bg.png); display: none;} /*确认登录弹窗*/ .popup_cover{ width: 9.2rem; height: 5.6rem; background: #ffffff; position: absolute; top: 50%; left: 50%; margin-left:-4.6rem; margin-top: -2.8rem; border-radius: 0.1rem;} .popup_title_c{ width: 100%; height: .96rem; position: relative;} .popup_line{ width: 8.4rem; height: 0.7rem; padding: 0.2rem 0.4rem; position: relative;} .popup_title{ line-height: .96rem; color: #3bb3bf; margin-left: .3rem;} .popup_close{ position: absolute; right: .2rem; top: 50%; display: block; width: .6rem; height: .6rem; margin-top: -0.3rem; background: url(../images/close_icon.png); background-size: contain;} .phonenum{ height: 100%; width: 6.2rem;} .getcode{ display: inline-block; width: 2rem; height: .7rem; text-align: center; line-height: .7rem; border: 1px solid #bec8d0; float: right; color: #8ea09e; font-family: "microsoft yahei";} .popup_btn{ position: absolute; bottom: .4rem; left: 50%; width: 4rem; height: .96rem;margin-left: 0; line-height: .96rem; text-align: center; background: #3bb3bf; color: #ffffff; border-radius: .1rem;border: 1px solid #3bb3bf;} .n_popup_btn{ position: absolute; bottom: .4rem; left: 50%; width: 4rem; height: .96rem; margin-left: -4.18rem; line-height: .96rem; text-align: center; background: #ffffff; color: #3bb3bf; border-radius: .1rem;border: 1px solid #3bb3bf;} /*发送验证码*/ .identwait{ display: none;} /*框架*/ .contain{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 10rem; margin: 0 auto; height: auto} .contain_g{position: absolute; top: 7.09rem; left: 0; bottom: 0; right: 0; width: 10rem; margin: 0 auto; height: auto; transition: top 0.1s;-webkit-transition: top 0.1s; background: #fff;} /*头*/ .header{ position: absolute; top: 0; left: 0; width: 10rem; background: #3BB3BF;} .header_title{ display: block; width: 6.6rem; height: 1rem; text-align: center; margin: 0 auto; color: #ffffff; line-height: 1rem;} .header_back{ position: absolute; left: 0; top: 0; display: block; width: 1rem; height: 1rem; background: url(../images/back_icon.png); background-size: contain;} .html_content{ position:absolute; top:1rem; left:0; right:0; bottom:1.2rem; width: 10rem; overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch;} .html_content_search{position:absolute; top:2rem; left:0; right:0; bottom:1.2rem; width: 10rem; overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch;} /*底部导航*/ .footer{ position: absolute; display: table; left: 0; right: 0; bottom: 0; width: 10rem; height: 1.2rem; background: #ffffff; border-top: 1px solid #bec8d0;} .footer_item{ display: table-cell; width: 2.5rem; height: 1.2rem; } .footer_item span{ display: block; width: .58rem; height: .6rem; margin: 0.1rem auto 0; background-size: contain;} .footer_item em{ color: #BDC7CF; display: block; width:100%; text-align: center;} .footer_item:hover em,.selected em{ color: #3BB3BF;} .icon1{ background: url(../images/icon_01.png) no-repeat;} .icon2{ background: url(../images/icon_02.png) no-repeat;} .icon3{ background: url(../images/icon_03.png) no-repeat;} .icon4{ background: url(../images/icon_04.png) no-repeat;} .icon5{ background: url(../images/icon_05.png) no-repeat;} .footer_item:hover .icon1, .selected .icon1{ background: url(../images/icon_11.png) no-repeat; background-size: contain;} .footer_item:hover .icon2, .selected .icon2{ background: url(../images/icon_12.png) no-repeat; background-size: contain;} .footer_item:hover .icon3, .selected .icon3{ background: url(../images/icon_13.png) no-repeat; background-size: contain;} .footer_item:hover .icon4, .selected .icon4{ background: url(../images/icon_14.png) no-repeat; background-size: contain;} .footer_item:hover .icon5, .selected .icon5{ background: url(../images/icon_15.png) no-repeat; background-size: contain;}
