首先了解下px触趴，em，rem的區(qū)別
px：
px（像素）是絕對(duì)單位袋倔，頁(yè)面按精確像素展示雕蔽，使頁(yè)面較穩(wěn)定和相對(duì)固定一些。但這種方法存在一個(gè)問(wèn)題宾娜，用戶在瀏覽我們制作的web頁(yè)面時(shí)批狐，如果他改變了瀏覽器的字體大小，或是縮放前塔、放大頁(yè)面嚣艇，這時(shí)會(huì)使頁(yè)面布局被打亂。
em：
em是相對(duì)單位华弓，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小食零。上面說(shuō)到使用px為單位的web頁(yè)面會(huì)遇到的問(wèn)題可以使用em來(lái)解決。
例如con2的父元素為con1寂屏，css中<strong>con1</strong>和<strong>con2</strong>的font-size都設(shè)置為2em贰谣；
Paste_Image.png
可以看得出con1和con2的font-size樣式都是2em，但是展現(xiàn)出來(lái)的字體大小不一樣,因?yàn)槟J(rèn)情況下沒(méi)有對(duì)字體進(jìn)行重新設(shè)置的話迁霎，瀏覽器默認(rèn)字體為16px吱抚，con1的2em就相當(dāng)于32px，那么con2的2em就相當(dāng)于con1的兩倍也就是64px考廉，所以con2字體比con1的大秘豹。
Paste_Image.png
rem
rem是相對(duì)于頁(yè)面根元素的大小單位，我們只需給頁(yè)面的根元素設(shè)置一個(gè)參考值昌粤，就可以在頁(yè)面中根據(jù)參考值設(shè)置其他元素的大小既绕，rem不會(huì)出現(xiàn)嵌套的繁瑣。
設(shè)置html下1rem=10px
Paste_Image.png
可以看得出1rem就是12px（瀏覽器下最小的字體為12px涮坐，當(dāng)設(shè)置小于12px的字體凄贩，也默認(rèn)為12px）
無(wú)論元素處于哪一層，都不會(huì)受到父元素的影響袱讹。
Paste_Image.png
pc端各大網(wǎng)站頂部樣式
Paste_Image.png
頂部字體大性醮丁：使用最多的為12px，顏色：基本上為灰白色，白色评肆，字體樣式：微軟雅黑，Arial非区，sinsun
代碼如下
.right{padding-left: 20px;}
.r1{margin-left: 100px;}
.list1{font-family: tahoma;font-size: 12px;padding-left: 20px;background-color:#FAFAFA;color:#999 ;line-height: 30px;}
.list2{font-family:"宋體";font-size: 12px;padding-left: 20px;background-color:#333;color:#fff ;line-height: 42px;}
.list3{font-family: "微軟雅黑";font-size: 12px;padding-left: 20px;background-color:#FAFAFA;color:#4c4c4c ;line-height: 42px;}
.list4{font-family: simsun;font-size: 12px;padding-left: 20px;background-color:#f0f7ff;color:#333 ;line-height: 30px;}
.list5{font-family: helvetica;font-size: 13px;padding-left: 20px;background-color:#3b5998;color:#fff ;line-height:28px;font-weight: bold;}
.list6{font-family: arial;font-size: 13px;padding-left: 20px;background-color:#fff;color:#66757f ;line-height:18px;font-weight: 500;height: 46px;}
pc端導(dǎo)航
現(xiàn)在看下各大網(wǎng)站的導(dǎo)航使用的字體瓜挽，大小，顏色征绸，背景色
Paste_Image.png
統(tǒng)計(jì)了一下：導(dǎo)航使用最多的字體大小為14px久橙，15px，16px最多管怠，字體幾乎都是微軟雅黑淆衷，導(dǎo)航欄字體為白色，灰白色居多渤弛，背景色一般都為深色背景搭配白色字體或淺色字體祝拯，淺色背景搭配深色字體
代碼如下
.nav1{color: #333;background-color: #eee;height: 38px;font-size: 16px;font-family: "微軟雅黑";}
.nav1 li{list-style: none;float: left;padding: 0 10px;line-height:38px;}
.nav2{background-color: #0a56bb;height: 40px;color: #fff;font-size: 15px;font-family: "微軟雅黑";}
.nav2 li{float: left;list-style: none;line-height: 40px;padding: 0 5px;}
.nav3{background-color: #eee;color: #555;font-family: "微軟雅黑";font-size: 16px;height: 40px;line-height: 40px;font-weight: 700;}
.nav3 li{float: left;list-style: none;padding: 0 10px;}
.nav4{color:#0078d7 ;height: 71px;font-family: "微軟雅黑";font-size: 14px;}
.nav4 li{line-height: 70px;float: left;padding: 0 10px;list-style: none;}
.nav5{color:#fff ;height: 60px;font-family: "微軟雅黑";font-size: 14px;background-color: #333;}
.nav5 li{line-height: 60px;list-style: none;padding: 0 18px;float: left;}
.nav6{color:#333 ;height: 44px;font-family: "HanHei";font-size: 16px;background-color:black;}
.nav6 li{line-height: 44px;list-style: none;padding: 0 10px;float: left;}
pc端正文
Paste_Image.png
字體:以14px和12px最多，大多數(shù)以14px作為正文的大小她肯，字體顏色：使用#666和#333最多佳头，字體樣式：微軟雅黑，tahoma
.page1{color: #666;font-size: 12px;font-family: tahoma;}
.page2{color: #666;font-size: 12px;font-family: verdana;}
.page3{font-size: 14px;font-family: "微軟雅黑";}
.page4{font-size: 12px;font-family: "微軟雅黑";color: #666;}
.page5{font-size: 14px;font-family: simsun;color: #0E8ED8;}
.page6{font-size: 14px;font-family: simsun;color: #333;}
手機(jī)端導(dǎo)航晴氨，標(biāo)題康嘉，正文
Paste_Image.png
body{font-size: 62.5%;background: #EEEEEE;}
a{padding:0 1em ;}
.nav1{font-family:"微軟雅黑";font-size:1.5em;color: white;background-color:#ff697a;height: 4em;line-height: 4em;}
.nav2{font-family: "微軟雅黑";color: #000;font-size: 1.2em;line-height: 18px;background: #FFFFFF;height: 2em;line-height: 2em;}
.nav3{font-family: tahoma;font-size: 12px;color: #666;background: #FFFFFF;}
Paste_Image.png
html{font-size: 62.5%;}
.nav4{font-family:"微軟雅黑";color: #cfd3da;font-size: 1.4rem;background-color: #39424a;height: 2em;line-height: 2em;}
a{padding:0 1rem ;}
.nav6{font-family: "微軟雅黑";font-size: 1.2rem;}
.nav5{font-family: "微軟雅黑";font-size: 1.36rem;}
.nav7{font-size: 1.2rem;font-family: arial;color: #ccc;background: #EEEEEE;}
.nav8{font-size: 1.2rem;color: #5f636b;font-family: "微軟雅黑";}
Paste_Image.png
a{padding: 0 10px;}
.nav1{font-family: sinsun;font-size: 18px;color: #FFF;background: #333;}
.nav2 a.h4{font-family:simsun;font-size: 18px;color: #6f6f6f;}
.nav3 p{font-family: simsun;font-size: 18px;color: #2b2b2b;}
.nav4 a{font-family: "微軟雅黑";font-size: 12px;color: #aaa;}
