Vue - 移动端项目初始设置

红太狼 2021-07-25 13:01 534阅读 0赞

移动端项目初始设置

  • 一. 引入完整meta
  • 二. 引入 reset.css 文件，初始化项目样式
  • 三. 解决 1 物理像素边框问题
  • 四. 解决某些设备上或浏览器上 300 毫米 click 点击延迟问题

一. 引入完整meta

  1. <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

二. 引入 reset.css 文件，初始化项目样式

  • main.js 文件中引入reset.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:baseline}
    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;}

三. 解决 1 物理像素边框问题

  • main.js 文件中引入border.css文件

  • border.css

    1. @charset "utf-8";
    2. .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { 
    3.     position: relative;
    4. }
    5. .border::before, .border-top::before, .border-right::before, .border-bottom::before, .border-left::before, .border-topbottom::before, .border-topbottom::after, .border-rightleft::before, .border-rightleft::after, .border-topleft::before, .border-topleft::after, .border-rightbottom::before, .border-rightbottom::after, .border-topright::before, .border-topright::after, .border-bottomleft::before, .border-bottomleft::after { 
    6.     content: "\0020";
    7.     overflow: hidden;
    8.     position: absolute;
    9. }
    10. /* border * 因，边框是由伪元素区域遮盖在父级 * 故，子级若有交互，需要对子级设置 * 定位 及 z轴 */
    11. .border::before { 
    12.     box-sizing: border-box;
    13.     top: 0;
    14.     left: 0;
    15.     height: 100%;
    16.     width: 100%;
    17.     border: 1px solid #eaeaea;
    18.     transform-origin: 0 0;
    19. }
    20. .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { 
    21.     left: 0;
    22.     width: 100%;
    23.     height: 1px;
    24. }
    25. .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { 
    26.     top: 0;
    27.     width: 1px;
    28.     height: 100%;
    29. }
    30. .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { 
    31.     border-top: 1px solid #eaeaea;
    32.     transform-origin: 0 0;
    33. }
    34. .border-right::before, .border-rightbottom::before, .border-rightleft::before, .border-topright::after { 
    35.     border-right: 1px solid #eaeaea;
    36.     transform-origin: 100% 0;
    37. }
    38. .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before { 
    39.     border-bottom: 1px solid #eaeaea;
    40.     transform-origin: 0 100%;
    41. }
    42. .border-left::before, .border-topleft::after, .border-rightleft::after, .border-bottomleft::after { 
    43.     border-left: 1px solid #eaeaea;
    44.     transform-origin: 0 0;
    45. }
    46. .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { 
    47.     top: 0;
    48. }
    49. .border-right::before, .border-rightleft::after, .border-rightbottom::before, .border-topright::after { 
    50.     right: 0;
    51. }
    52. .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::after { 
    53.     bottom: 0;
    54. }
    55. .border-left::before, .border-rightleft::before, .border-topleft::after, .border-bottomleft::before { 
    56.     left: 0;
    57. }
    58. @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) { 
    59.     /* 默认值，无需重置 */
    60. }
    61. @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) { 
    62.     .border::before { 
    63.         width: 200%;
    64.         height: 200%;
    65.         transform: scale(.5);
    66.     }
    67.     .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { 
    68.         transform: scaleY(.5);
    69.     }
    70.     .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { 
    71.         transform: scaleX(.5);
    72.     }
    73. }
    74. @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) { 
    75.     .border::before { 
    76.         width: 300%;
    77.         height: 300%;
    78.         transform: scale(.33333);
    79.     }
    80.     .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { 
    81.         transform: scaleY(.33333);
    82.     }
    83.     .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { 
    84.         transform: scaleX(.33333);
    85.     }
    86. }

四. 解决某些设备上或浏览器上 300 毫米 click 点击延迟问题

  1. 项目中安装 fastclick 依赖包：
    npm install fastclick --save

  2. main.js 中引入安装的 fastclick

    1. import fastClick from 'fastclick'
    2. fastClick.attach((document.body))

发表评论

表情：
评论列表 （有 0 条评论，534人围观）

还没有评论，来说两句吧...

相关阅读