- 配置mete头部
- 引入换算is代码
- 设置html字体大小
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="telephone=no" name="format-detection" /> <meta name="format-detection" content="email=no" /> <meta http-equiv="Cache-Control" content="no-cache" /> <title>商品详情</title> <style type="text/css"> html { font-size: 20px; } body { margin: 0; } .container { background-color: #f7f8fa; height: 100vh; } span{ line-height: 1; font-size:0.7rem; color:rgba(51,51,51,1); } .good-show{ height:18.75rem; } .block1{ padding: 0 0.75rem; background: #fff; display: flex; flex-direction: column; position: relative; } .good-name{ padding-top:0.825rem; font-size:0.8rem; font-weight:bold; color:rgba(51,51,51,1); } .remark{ padding-top:0.375rem; padding-bottom:1.225rem; color:rgba(185,186,190,1); } .format-row{ padding-top:0.425rem; font-size: 0; } .last-format-row{ padding-bottom:0.825rem; } .format-row>.name{ width: 0.88rem; } .info-rox{ display: flex; flex-direction: column; } .QR-code-pic{ position: absolute; top: 0.8rem; right: 0.75rem; width: 3.25rem; height: 3.25rem; } .price{ position: absolute; top: 5.925rem; right: 0.75rem; font-size: 1.25rem; color:rgba(255,87,87,1); } .price::before{ content: '￥'; font-size: 0.75rem; color:rgba(255,87,87,1); } .block2 { margin-top: 0.5rem; padding: 0 0.75rem; background: #fff; display: flex; } .store_img{ margin-top: 0.8rem; margin-right: 0.55rem; width:0.85rem; height:0.9rem; } .shop-name{ font-weight:bold; padding-top: 0.95rem; } .tel{ padding-top: 0.85rem; } .email{ padding-top: 0.625rem; } .address{ padding-top: 0.625rem; padding-bottom: 0.8rem; } </style> <script> //orientationchange方向改变事件 (function(doc, win) { var docEl = doc.documentElement, //根元素html //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。 docEl.style.fontSize = 20 * (clientWidth / 375) + 'px'; }; //alert(docEl) if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值 doc.addEventListener('DOMContentLoaded', recalc, false) //绑定浏览器缩放与加载时间 })(document, window); //alert(document.documentElement.clientWidth/320)</script></head><body> <div class="container"> <img src="http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg" alt="" class="good-show"> <div class="block1"> <span class="good-name">安琪高活性干酵母</span> <span class="remark">备注信息在这里</span> <div class="format-row"> <span class="name">规 格：</span> <span class="value">125g</span> </div> <div class="format-row"> <span class="name">分 类：</span> <span class="value">休闲零食</span> </div> <div class="format-row last-format-row"> <span class="name">条形码：</span> <span class="value">5571664814</span> </div> <img src="http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg" alt="" class="QR-code-pic"> <span class="price">9.9</span> </div> <div class="block2"> <img src="./image/icon-home.png" alt="" class="store_img"> <div class="info-rox"> <span class="shop-name">见福便利店（湖心岛店）</span> <span class="tel">18046045941</span> <span class="email">www.jiandandian.com</span> <span class="address">福建厦门市湖里区江头街道655号</span> </div> </div> </div></body></html>
