[CSS]手机端网页开发问题及解决方法整理
Q1:CSS属性默认值干扰布局。
A1：
初始化
/* Reset ================================================================================= */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody,tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: top;
}
Q2:更改全部字体大小。
A2:
使用rem标记字体大小，font-size:1.0rem;
rem表示相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。
常用方式
html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
/*浏览器默认字体大小16px;62.5%正好10px,方便计算,比如1.2rem等于12px;*/
/*或者直接强制指定font-size: 10px;*/
}
body {
font-size: 1.4rem;
}
h1 {
font-size: 2.4rem;
}
Q3:根据不同手机屏幕，字体大小按比例缩放。
A3:
html{font-size:16px;}//默认16px;
@media screen and (min-width:300px) and (max-width:320px){html{font-size:14px;}}//width在300~320px（包含）,根字体大小14px；
@media screen and (min-width:321px) and (max-width:375px){html{font-size:16px;}}//width在321~375px（包含）,根字体大小16px；
@media screen and (min-width:376px) and (max-width:415px){html{font-size:18px;}}//width在376~415px（包含）,根字体大小18px；
Q4:去除<a></a>标签中文字的默认变化。
A4:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Q5:ul下li元素之间存在空隙。
A5：
li元素浮动。
Q6:不改变div式样，让下面的div上移。
A6:
上面div使用overflow:auto;下面div使用margin-top:-10px。
Q7：文字超出某个长度使用“...”代替。
A7:
固定标签宽度，并设置CSS
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
Q8:图片在div左右居中显示。
A8:
<img style="width:100%;margin:0px auto;">
注意，一般图片都要设置宽度，不然会将屏幕撑开，可以左右滑动。
Q9：使用span显示文字。
A9：
span是行内标签，无法设置高和宽，只是将其中的文字包裹起来。
<span style="display:block;float:left;height:65px;line-height:65px;text-align:center;color:#426580;font-weight:bold;font-size:1.0rem">测试</span>
display:block;=》可设置宽高，margin，padding。
float:left;=》一行显示多个block类型的span，或者直接display:inline-block。
height:65px;line-height:65px;=》将这两个属性设置为相同的值可以使文字垂直居中。
text-align:center;=》文字水平居中。
Q10：可以显示数字的圆圈。
A10:
设置宽度，并设置弧度为宽度的50%；
<span style="display:inline-block;width:10px;border-radius:50%;>0</span>