手机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; //這個刪掉,因為如果設置這個蘋果手機表單無法填寫 }?
轉載于:https://www.cnblogs.com/thongyan/p/7478744.html
總結
- 上一篇: mysql explain语句_Mysq
- 下一篇: mybatis一级,二级缓存。缓存带来的