Home Explore Help
Sign In
lovecoding
/
VIP30
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

new

zsydgithub 1 year ago
parent
099f84224a
commit
2a5b4b46cd
15 changed files with 280 additions and 1 deletions
Split View Show Diff Stats
  1. 1 1
      移动端/8_点透事件.html
  2. 50 0
      移动端/例子/css/index.css
  3. 135 0
      移动端/例子/css/reset.css
  4. 31 0
      移动端/例子/font/iconfont.css
  5. BIN
      移动端/例子/font/iconfont.ttf
  6. BIN
      移动端/例子/font/iconfont.woff
  7. BIN
      移动端/例子/font/iconfont.woff2
  8. BIN
      移动端/例子/images/.DS_Store
  9. BIN
      移动端/例子/images/icon01.png
  10. BIN
      移动端/例子/images/img01.png
  11. BIN
      移动端/例子/images/img02.png
  12. BIN
      移动端/例子/images/img03.jpg
  13. BIN
      移动端/例子/images/img04.jpg
  14. 32 0
      移动端/例子/index.html
  15. 31 0
      移动端/例子/rem.js

+ 1 - 1
移动端/8_点透事件.html
View File 

@@ -92,7 +92,7 @@
 
     var oUnder = document.querySelector('#underLayer')
 
     oClose.ontouchstart = function (e) {
 
       /* 阻止事件默认行为 */
 
-      e.preventDefault()
 
+      // e.preventDefault()
 
       document.querySelector('#popupLayer').style.display = 'none'
 
       document.querySelector('#bgMask').style.display = 'none'
 
     }

+ 50 - 0
移动端/例子/css/index.css
View File 

@@ -0,0 +1,50 @@
 
+#header{
 
+  height: 0.88rem;
 
+  background: #56AB2F;
 
+  display: flex;
 
+}
 
+#position{
 
+  width: 2.4rem;
 
+  font-size: 16px;
 
+  height: 0.88rem;
 
+  text-align: center;
 
+  line-height: 0.88rem;
 
+  color: #FFFFFF;
 
+}
 
+#search{
 
+  flex: 1;
 
+  padding-top: 0.15rem;
 
+}
 
+#search input{
 
+  width: 5.07rem;
 
+  height: 0.6rem;
 
+  border-radius: 0.3rem;
 
+  background: #FFFFFF;
 
+}
 
+.slide{
 
+  height: 2.62rem;
 
+  text-align: center;
 
+  padding: 10px 0;
 
+}
 
+.slide-img{
 
+  width: 6.52rem;
 
+  height: 2.62rem;
 
+  margin: 0 auto;
 
+}
 
+.slide-img img{
 
+  width: 100%;
 
+}
 
+.now{
 
+  width: 1.3rem;
 
+  height: 0.36rem;
 
+  position: absolute;
 
+  margin-top: -1rem;
 
+  margin-left: 1rem;
 
+  background: #FFFFFF;
 
+  font-size: 10px;
 
+  background: rgba(255,255,255,0.2);
 
+  border-radius: 9px;
 
+  text-align: center;
 
+  line-height: 0.36rem;
 
+  color: #FFFFFF;
 
+}

+ 135 - 0
移动端/例子/css/reset.css
View File 

@@ -0,0 +1,135 @@
 
+/*CSS Reset*/
 
+body,
 
+div,
 
+dl,
 
+dt,
 
+dd,
 
+ul,
 
+ol,
 
+li,
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6,
 
+pre,
 
+code,
 
+form,
 
+fieldset,
 
+legend,
 
+input,
 
+textarea,
 
+p,
 
+blockquote,
 
+th,
 
+td,
 
+header,
 
+hgroup,
 
+nav,
 
+section,
 
+article,
 
+aside,
 
+footer,
 
+figure,
 
+figcaption,
 
+menu,
 
+button {
 
+    margin: 0;
 
+    padding: 0;
 
+    border: 0;
 
+    outline: 0;
 
+    /* 仅根据font-size属性决定字体大小。 */
 
+    font-size-adjust: none;
 
+    /* 切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小 */
 
+    -webkit-text-size-adjust: 100%!important;
 
+    /* 禁止长按弹出系统菜单 */
 
+    -webkit-touch-callout: none;
 
+}
 
+body {
 
+    font-family: "Helvetica","Microsoft Yahei","Helvetica Neue", Helvetica, STHeiTi, sans-serif;
 
+    line-height: 1.5;
 
+    font-size: 16px;
 
+    color: #333333;
 
+    background-color: #ffffff;
 
+    /* 禁止用户选中文字 */
 
+    -webkit-user-select: none;
 
+    /* 切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小 */
 
+    -webkit-text-size-adjust: 100%;
 
+    /* 去除android下a/button/input标签被点击时产生的边框 & 去除ios下a标签被点击时产生的半透明灰色背景 */
 
+    -webkit-tap-highlight-color: transparent;
 
+    outline: 0;
 
+}
 
+
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6 {
 
+    font-weight: normal;
 
+}
 
+
 
+table {
 
+    border-collapse: collapse;
 
+    border-spacing: 0;
 
+}
 
+
 
+caption,
 
+th {
 
+    text-align: left;
 
+}
 
+
 
+fieldset,
 
+img {
 
+    border: 0;
 
+}
 
+
 
+li {
 
+    list-style: none;
 
+}
 
+
 
+ins {
 
+    text-decoration: none;
 
+}
 
+
 
+del {
 
+    text-decoration: line-through;
 
+}
 
+
 
+input,
 
+button,
 
+textarea,
 
+select,
 
+optgroup,
 
+option {
 
+    font-family: inherit;
 
+    font-size: inherit;
 
+    font-style: inherit;
 
+    font-weight: inherit;
 
+    outline: 0;
 
+}
 
+
 
+button {
 
+    /* button在iOS有个默认背景 */
 
+    -webkit-appearance: none;
 
+    border: 0;
 
+    background: none;
 
+}
 
+
 
+a {
 
+    /* 禁止长按弹出系统菜单 */
 
+    -webkit-touch-callout: none;
 
+    text-decoration: none;
 
+}
 
+
 
+:focus {
 
+    outline: 0;
 
+    /* 标签被点击时产生的边框 */
 
+    -webkit-tap-highlight-color: transparent;
 
+}
 
+
 
+em,
 
+i {
 
+    font-style: normal;
 
+}

+ 31 - 0
移动端/例子/font/iconfont.css
View File 

@@ -0,0 +1,31 @@
 
+@font-face {
 
+  font-family: "iconfont"; /* Project id 3177944 */
 
+  src: url('iconfont.woff2?t=1644562719502') format('woff2'),
 
+       url('iconfont.woff?t=1644562719502') format('woff'),
 
+       url('iconfont.ttf?t=1644562719502') format('truetype');
 
+}
 
+
 
+.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+.icon-che:before {
 
+  content: "\e6cd";
 
+}
 
+
 
+.icon-tuipiao:before {
 
+  content: "\e8ba";
 
+}
 
+
 
+.icon-weizhi:before {
 
+  content: "\e681";
 
+}
 
+
 
+.icon-xiangxiajiantou:before {
 
+  content: "\e65e";
 
+}
 
+

BIN
移动端/例子/font/iconfont.ttf
View File


BIN
移动端/例子/font/iconfont.woff
View File


BIN
移动端/例子/font/iconfont.woff2
View File


BIN
移动端/例子/images/.DS_Store
View File


BIN
移动端/例子/images/icon01.png
View File


BIN
移动端/例子/images/img01.png
View File


BIN
移动端/例子/images/img02.png
View File


BIN
移动端/例子/images/img03.jpg
View File


BIN
移动端/例子/images/img04.jpg
View File


+ 32 - 0
移动端/例子/index.html
View File 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <script src="rem.js"></script>
 
+  <link rel="stylesheet" href="css/reset.css">
 
+  <link rel="stylesheet" href="font/iconfont.css">
 
+  <link rel="stylesheet" href="css/index.css">
 
+</head>
 
+<body>
 
+  <div id="header">
 
+    <div id="position">
 
+      <span class="iconfont icon-weizhi"></span>
 
+      上海市
 
+      <span class="iconfont icon-xiangxiajiantou"></span>
 
+    </div>
 
+    <div id="search">
 
+      <input type="text" placeholder="搜索商家或者商品名称">
 
+    </div>
 
+  </div>
 
+  <div class="slide">
 
+    <div class="slide-img">
 
+      <img src="images/img01.png" alt="">
 
+    </div>
 
+    <!-- <button class="now">立即兑换</button> -->
 
+    <div class="now">立即兑换</div>
 
+  </div>
 
+</body>
 
+</html>

+ 31 - 0
移动端/例子/rem.js
View File 

@@ -0,0 +1,31 @@
 
+;
 
+(function(win) {
 
+    var doc = win.document;
 
+    var docEl = doc.documentElement; 
+    var tid;
 
+
 
+    function refreshRem() {
 
+        // 获取屏幕宽度
 
+       
+        var width = docEl.getBoundingClientRect().width;
 
+        var rem = width / 7.5; // 将屏幕宽度分成6.4份， 1份为1rem   320/6.4 = 50 
+        // 让html的fontSize = 50px   1rem = 50px
 
+        docEl.style.fontSize = rem + 'px'; 
+        // 320  /6.4 = 50   html->50      1rem   50 
+        // 640  /6.4 = 100  html-> 100           100
 
+    }
 
+
 
+    win.addEventListener('resize', function() {
 
+        clearTimeout(tid);
 
+        tid = setTimeout(refreshRem, 10);
 
+    }, false);
 
+    win.addEventListener('pageshow', function(e) {
 
+        if (e.persisted) {
 
+            clearTimeout(tid);
 
+            tid = setTimeout(refreshRem, 10);
 
+        }
 
+    }, false);
 
+
 
+    refreshRem();
 
+
 
+})(window);