html5移动端制作知识点总结
一、測試工具：1.Chrome 2.Opera Mobile
二、分辨率：一般現(xiàn)代手機(jī)最小320px，最大640px。
三、
全屏流體設(shè)計(jì)：
1.騰訊新聞：http://xw.qq.com/
2.途牛旅游：http://m.tuniu.com/
固屏類流體設(shè)計(jì)
1.京東商城：http://m.jd.com/
2.淘寶網(wǎng)：http://m.taobao.com/（全屏+固屏，導(dǎo)航一般用全屏）
四、<meta>標(biāo)簽，放在<head>之間
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
name="viewport" //窗口設(shè)定
width=device-width //頁面大小屏幕等寬
initial-scale=1.0 //初始縮放比例，1.0 表示原始比例大小
minimum-scale=1.0 //允許縮放的最小比例
maximum-scale=1.0 //允許縮放的最大比例
user-scalable=no //用戶是否可以縮放，這里 no 表示不可以
五、rem
網(wǎng)頁默認(rèn)字體大小為16px，如果想設(shè)置為10px，用百分比則為10/16*100%=62.5%，所以在html中設(shè)置字體大小為62.5%，即10px，那么下面的其它元素都用rem作為單位，那么10px就是1rem，14px就是14*1/10=1.4rem。
同理，如果里面一個(gè)p的字體大小想設(shè)置為24px，那么2.4rem。
兼容性：IE9+，以及現(xiàn)代主流瀏覽器。
所有的單位像素都換成rem，區(qū)塊和圖片縮放用百分比。
六、圖片自適應(yīng)，并居中：
img{display:block;max-width:100%;margin:0 auto;}
七、媒體查詢
/*媒體查詢，部分參考bootstrap框架*/
/*當(dāng)頁面大于1200px時(shí)，大屏幕，主要是PC端*/ @media(min-width:1200px){
}
/*當(dāng)頁面大于992px，小于1199px之間時(shí)，中等屏幕，分辨率低的PC*/
@media(min-width:992px)and(max-width:1199px){
}
/*當(dāng)頁面大于768px，小于991px之間時(shí)，小屏幕，主要是pad*/
@media(min-width:768px)and(max-width:991px){
}
/*當(dāng)頁面大于480px，小于767px之間時(shí)，超小屏幕，主要是手機(jī)*/
@media(min-width:480px)and(max-width:767px){
}
/*當(dāng)頁面小于480px時(shí)，微小屏幕，更低分辨率手機(jī)。*/
@media(max-width:479px){
}
八、box-sizing屬性（當(dāng)給一個(gè)區(qū)塊設(shè)置padding值時(shí)，區(qū)塊的寬高可以保持不變）
div{box-sizing:border-box;}
九、清理浮動
一個(gè)div清理浮動之后，在設(shè)置上下外邊距就沒有效果了，這是解決方法是在上面浮動元素的末尾加上一個(gè)空div，再利用偽元素進(jìn)行清除浮動。
<div class="clearfix"></div>
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden;}
十、超出文字不換行，用省略號表示
{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
但這是webkit的私有屬性，解決的兩一個(gè)方法：在文字外面包裹一個(gè)div，設(shè)置它的css
div{height: ?;overflow:hidden;}
?
十一、如果5個(gè)鏈接，按照順序排列： ABCDE，結(jié)果加上{float:right}之后，順序就變成了EDCBA。
當(dāng)A遇到Float，則命令它向右跑去。當(dāng)B遇到Fooat，同上，但此時(shí)最右邊位置已經(jīng)被A占了，所以B只能在A 左邊。。。。CDE依次。因此就倒序了。
解決方法之，套個(gè)外圍標(biāo)簽：復(fù)制內(nèi)容到剪貼板代碼:<div style="float:right; border:solid 1px red;"> <b>A</b> <b>B</b> <b>C</b> <b>D</b> <b>E</b></div>
十二、讓導(dǎo)航欄固定在窗口頂部，在最上層，始終可見
header{position: fixed;top:0;z-index:9999;}
還要在下面空出45像素距離，.bottom{padding-top:45px;}
十三、超出兩行則用省略號表示(一行、兩行、三行……同理)（webkit的私有屬性）
{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
十四、若內(nèi)容太滿，在小窗口中為隱藏，用媒體查詢，設(shè)置display:none;
十五、設(shè)置大小盡量不用絕對像素，改為寬度百分比，高度自適應(yīng)。或者只用padding控制大小。
十六、css透明度設(shè)置（兼容所有瀏覽器）
transparent_class?{ ?
? ?filter:alpha(opacity=50); ?/*IE濾鏡，透明度50%*/
? -moz-opacity:0.5; ?/*Firefox私有，透明度50%*/
? -khtml-opacity:?0.5;??
? opacity:?0.5; ?/?*其他，透明度50%*/
} ??
十七、實(shí)現(xiàn)背景透明，文字不透明：
方法一、整兩個(gè)DIV放在一個(gè)位置，不透明DIV放上面透明DIV放下面
1.把背景圖當(dāng)獨(dú)放在一個(gè)div中，絕對定位，z-index:0，使用opacity設(shè)置不透明度
2.內(nèi)容在另外一個(gè)div，絕對定位，z-index:1
方法二、使用css3的background-color:rgba();
input {background-color:#ff0000;opacity:.5;}
這種方式會讓輸入框的背景色變成50%透明度的紅色，但輸入框的的文字不受任何影響。
?
十八、粗體文本
HTML5 規(guī)范聲明：應(yīng)該使用<h1> - <h6>?來表示標(biāo)題，使用?<em>?標(biāo)簽來表示強(qiáng)調(diào)的文本，應(yīng)該使用?<strong>?標(biāo)簽來表示重要文本，應(yīng)該使用 <mark> 標(biāo)簽來表示標(biāo)注的/突出顯示的文本。在沒有其他合適標(biāo)簽更合適時(shí)，才應(yīng)該把 <b> 標(biāo)簽作為最后的選項(xiàng)。
十九、box-sizing:border-box;
把邊框和內(nèi)邊距包括在內(nèi)，當(dāng)設(shè)置padding的時(shí)候不用重新計(jì)算。
?
轉(zhuǎn)載于:https://www.cnblogs.com/annie211/p/5954892.html
總結(jié)
以上是生活随笔為你收集整理的html5移动端制作知识点总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 集成电路模拟版图入门-版图基础学习笔记（
- 下一篇： 超牛逼的性能调优利器 — 火焰图