[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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章