H5 页面写法

柔光的暖阳◎ 2022-09-28 11:37 229阅读 0赞

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;\}