1、使各个手机型号展示的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;}
2、移动端1像素边框问题
由于移动端的屏幕的分辨率不同，比较好一点的手机屏幕的分辨率高，可能是二倍屏或者是3倍屏，这样的话，我们写border:1px solid black; 这样的代码，实际在这种高分辨率的屏幕上显示的是2px或者3px。
解决方案：引入一个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 right: 0; 113 } 114 .border-bottom::before, 115 .border-topbottom::after, 116 .border-rightbottom::after, 117 .border-bottomleft::after { 118 bottom: 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 }
3、移动端中点击延迟的问题
在移动端的某些浏览器上点击click会延迟300毫秒再执行
解决方案：
项目中安装 fastclick 第三方的包安装到项目依赖中：npm install fastclick --save 命令进行安装。