参考使用--手机H5模板样式

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;   //这个删掉，因为如果设置这个苹果手机表单无法填写
}

 

posted @ 2017-09-05 15:12  秦雨  阅读(1240)  评论(1)  编辑  收藏  举报