Vue移动端开发注意事项

2019年3月22日08:42:11 发表评论 阅读(1,841)

Vue移动端开发注意事项

移动端开发因为各个方面的原因，在开发的过程中需要注意以下几点：

统一css样式

在不同的手机浏览器上默认的样式是不统一的，初始化样式做个统一，方便后续的开发。

解决方法，引入reset.css文件

  1. @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
  2. body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
  3. body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
  4. h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
  5. h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
  6. h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
  7. address,cite,dfn,em,i,optgroup,var{font-style:normal}
  8. table{border-collapse:collapse;border-spacing:0;text-align:left}
  9. caption,th{text-align:inherit}
  10. ul,ol,menu{list-style:none}
  11. fieldset,img{border:0}
  12. img,object,input,textarea,button,select{vertical-align:middle}
  13. article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
  14. audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
  15. blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
  16. textarea{overflow:auto;resize:vertical}
  17. input,textarea,button,select,a{outline:0 none;border: none;}
  18. button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
  19. mark{background-color:transparent}
  20. a,ins,s,u,del{text-decoration:none}
  21. sup,sub{vertical-align:baselinebaseline}
  22. html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
  23. body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
  24. hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
  25. a {color: #25a4bb;text-decoration: none;}
使用

vue在main.js文件引入 import 'reset.css相对路径'

1px像素边框

在css中我们使用px作为单位，但是css中的像素并不是设备的物理像素，同样大小的设备分辨率不同，就会导致设备分辨率高的比设备分辨率低的像素多了1倍或者2倍。

解决方法，引入border.css文件

  1. @charset "utf-8";
  2. .border,
  3. .border-top,
  4. .border-right,
  5. .border-bottom,
  6. .border-left,
  7. .border-topbottom,
  8. .border-rightleft,
  9. .border-topleft,
  10. .border-rightbottom,
  11. .border-topright,
  12. .border-bottomleft {
  13.     position: relative;
  14. }
  15. .border::before,
  16. .border-top::before,
  17. .border-right::before,
  18. .border-bottom::before,
  19. .border-left::before,
  20. .border-topbottom::before,
  21. .border-topbottom::after,
  22. .border-rightleft::before,
  23. .border-rightleft::after,
  24. .border-topleft::before,
  25. .border-topleft::after,
  26. .border-rightbottom::before,
  27. .border-rightbottom::after,
  28. .border-topright::before,
  29. .border-topright::after,
  30. .border-bottomleft::before,
  31. .border-bottomleft::after {
  32.     content: "\0020";
  33.     overflow: hidden;
  34.     position: absolute;
  35. }
  36. /* border
  37.  * 因，边框是由伪元素区域遮盖在父级
  38.  * 故，子级若有交互，需要对子级设置
  39.  * 定位 及 z轴
  40.  */
  41. .border::before {
  42.     box-sizing: border-box;
  43.     top: 0;
  44.     left: 0;
  45.     height: 100%;
  46.     width: 100%;
  47.     border: 1px solid #eaeaea;
  48.     transform-origin: 0 0;
  49. }
  50. .border-top::before,
  51. .border-bottom::before,
  52. .border-topbottom::before,
  53. .border-topbottom::after,
  54. .border-topleft::before,
  55. .border-rightbottom::after,
  56. .border-topright::before,
  57. .border-bottomleft::before {
  58.     left: 0;
  59.     width: 100%;
  60.     height: 1px;
  61. }
  62. .border-right::before,
  63. .border-left::before,
  64. .border-rightleft::before,
  65. .border-rightleft::after,
  66. .border-topleft::after,
  67. .border-rightbottom::before,
  68. .border-topright::after,
  69. .border-bottomleft::after {
  70.     top: 0;
  71.     width: 1px;
  72.     height: 100%;
  73. }
  74. .border-top::before,
  75. .border-topbottom::before,
  76. .border-topleft::before,
  77. .border-topright::before {
  78.     border-top: 1px solid #eaeaea;
  79.     transform-origin: 0 0;
  80. }
  81. .border-right::before,
  82. .border-rightbottom::before,
  83. .border-rightleft::before,
  84. .border-topright::after {
  85.     border-right: 1px solid #eaeaea;
  86.     transform-origin: 100% 0;
  87. }
  88. .border-bottom::before,
  89. .border-topbottom::after,
  90. .border-rightbottom::after,
  91. .border-bottomleft::before {
  92.     border-bottom: 1px solid #eaeaea;
  93.     transform-origin: 0 100%;
  94. }
  95. .border-left::before,
  96. .border-topleft::after,
  97. .border-rightleft::after,
  98. .border-bottomleft::after {
  99.     border-left: 1px solid #eaeaea;
  100.     transform-origin: 0 0;
  101. }
  102. .border-top::before,
  103. .border-topbottom::before,
  104. .border-topleft::before,
  105. .border-topright::before {
  106.     top: 0;
  107. }
  108. .border-right::before,
  109. .border-rightleft::after,
  110. .border-rightbottom::before,
  111. .border-topright::after {
  112.     rightright: 0;
  113. }
  114. .border-bottom::before,
  115. .border-topbottom::after,
  116. .border-rightbottom::after,
  117. .border-bottomleft::after {
  118.     bottombottom: 0;
  119. }
  120. .border-left::before,
  121. .border-rightleft::before,
  122. .border-topleft::after,
  123. .border-bottomleft::before {
  124.     left: 0;
  125. }
  126. @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
  127.     /* 默认值，无需重置 */
  128. }
  129. @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  130.     .border::before {
  131.         width: 200%;
  132.         height: 200%;
  133.         transform: scale(.5);
  134.     }
  135.     .border-top::before,
  136.     .border-bottom::before,
  137.     .border-topbottom::before,
  138.     .border-topbottom::after,
  139.     .border-topleft::before,
  140.     .border-rightbottom::after,
  141.     .border-topright::before,
  142.     .border-bottomleft::before {
  143.         transform: scaleY(.5);
  144.     }
  145.     .border-right::before,
  146.     .border-left::before,
  147.     .border-rightleft::before,
  148.     .border-rightleft::after,
  149.     .border-topleft::after,
  150.     .border-rightbottom::before,
  151.     .border-topright::after,
  152.     .border-bottomleft::after {
  153.         transform: scaleX(.5);
  154.     }
  155. }
  156. @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
  157.     .border::before {
  158.         width: 300%;
  159.         height: 300%;
  160.         transform: scale(.33333);
  161.     }
  162.     .border-top::before,
  163.     .border-bottom::before,
  164.     .border-topbottom::before,
  165.     .border-topbottom::after,
  166.     .border-topleft::before,
  167.     .border-rightbottom::after,
  168.     .border-topright::before,
  169.     .border-bottomleft::before {
  170.         transform: scaleY(.33333);
  171.     }
  172.     .border-right::before,
  173.     .border-left::before,
  174.     .border-rightleft::before,
  175.     .border-rightleft::after,
  176.     .border-topleft::after,
  177.     .border-rightbottom::before,
  178.     .border-topright::after,
  179.     .border-bottomleft::after {
  180.         transform: scaleX(.33333);
  181.     }
  182. }
 使用

vue在main.js文件引入 import 'border.css相对路径'

300ms点击延迟

移动端项目中，某些机型上某些浏览器上，使用click事件时候会延迟300ms再执行，通过引入fastclick.js库来解决，

使用

可通过npm命令npm install fastclick --save安装， vue在main.js文件中引入fastclick.js并添加如下代码 fastClick.attach(document.body)

weinxin
微信小程序
互联网开发，终身学习者，欢迎您的关注！
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗？ 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛