APP应用前端开发
<p>1、开发手机APP前端要重视meta标签的编写；</p><p>2、注意HTML5标签在前端开发中的使用；</p>
<p>3、前端制作要舍弃CSS float属性（可flex布局），用绝对定位不利于页面布局的扩展；</p>
<p>4、APP前端制作利用CSS3边框背景属性。</p>
<p>5、尺寸大小 http://blog.sina.com.cn/s/blog_18b319a350102yhcz.html</p>
<p>6、<span class="hljs-attribute">-webkit<span class="hljs-attribute">-tap<span class="hljs-attribute">-highlight<span class="hljs-attribute">-color:transparent:移动端没有hover伪类，但可以使用这个实现高亮效果，通过给a、html、body添加。</span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute">7、display: table-cell。</span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute">8、取消a标签在移动端点击时出现的蓝色背景：<br> -webkit-tap-hightlight-color: transparent;<br> -webkit-user-select: none;<br> -moz-user-focus: none;<br> -moz-user-select: none;<br></span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"> 使用图片作为a标签的点击按钮时，当触发touchstart的时候，去掉出现灰色背景：<br> a, a:hover, a:active, a:visited, a:link, a:focus {<br> -webkit-tap-highlight-color: transparent;<br> -webkit-tap-highlight-color: rgba(0,0,0,0);<br> outline: none;<br> background: none;<br> text-decoration: none;<br> }<br></span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"> 改变选中的背景颜色：<br> ::selection { background: #fff; color; #333 }<br> ::-moz-selection { background: #fff; color: #333 }<br> ::-webkit-selection: { background: #fff; color: #333 }<br></span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"> 去掉iOS input框点击时的灰色背景：<br> -webkit-tap-highlight-color: transparent;<br></span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute">9、关于背景图片问题:</span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"> 移动端设置页面背景填满整个屏幕（html{}或body{}），在设计时，将background放置在外部样式不行，放在行内样式才可现实。background: url(/images/zhuceBG.jpg) no-repeat fixed center center / 100% 100%;</span></span></span></span></p>
<p><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute"><span class="hljs-attribute">10、padding代替margin</span></span></span></span></p>
<p> 修改网页发现问题：比如移动端网页，在屏幕分辨率为375 * 640的情况下，不要设置html、body或一个大的容器（相当于html/body）margin为正值，如果容器的box-sizing值不是border-box的情况下。这时容器的值宽或高由分辨率
值加上margin值，从而会水平或上下拉动。不对box-sizing值只是针对（border/padding/content）设置而已，对
margin不起作用。所以最外围容器（包含整个页面内容）最好不要设置margin正值，可以以padding代替。</p>
<p>11、element:after { content:""; display:block; height:0; visibility:hidden; clear:both}</p>
<p> 之前一直觉得对伪类“:after”来清除浮动的方法还不会使用，以至于没有效果。但是突然看到一篇文章，言外之意是，本来父元素的高度没有撑开，而在这个元素添加伪类清除浮动后，父元素有高度了，也说明清除浮动有效。</p>
<p>12、移动端字体默认最小为12px，使用transform的scale()可以进行缩放，缩放后字体不是居左显示的，设置transform-origin:left即可。</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/L-xjco/p/10844213.html
頁:
[1]