html模板:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 第一步、视口设置--> <meta name="viewport" content="width=device-width,user-scalable=no"/> <!--第二步、X5内核强制竖屏（qq,微信）/UC强制竖屏--> <meta name="x5-orientation" content="portrait"/> <meta name="screen-orientation" content="portrait"/> <!-- 第三步、禁止电话邮箱识别--> <meta name="format-detection" content="teltphone=no,email=no"/> <!--IE去模拟某个特定版本的IE浏览器的渲染方式--> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <title>博大报价神器</title> <meta name="keywords" content="关键词" /> <meta name="description" content="描述" />
<!--引入css--> <link rel="stylesheet" type="text/css" href="css/type.css"/>
<!--设置视口--> <script type="text/javascript"> (function(){ var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth/16 + "px"; console.log(hWidth/16); })(); </script> </head> <body> </body> </html>
css模板样式less:
@r:40rem; /*公共样式*/ body,div,ul,li,img{margin: 0;padding: 0;} ul,li{ list-style: none; } /*移动端去掉超链接高亮*/ a, input, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*移动端按钮变圆角解决*/ input, button { -webkit-appearance: none; border-radius: 0; } /*移动端各个版本默认字体样式清除*/ body { font-family: Helvetica; margin: 0; padding: 0; } /*去除移动端长按选中*/ body * { -webkit-text-size-adjust: 100%; -webkit-user-select: none; //这个删掉，因为如果设置这个苹果手机表单无法填写 }