php网页字号颜色,pc端web、移动端web的字体大小、颜色、字体样式使用

首先了解下px，em，rem的区别

px：

px(像素)是绝对单位，页面按精确像素展示，使页面较稳定和相对固定一些。但这种方法存在一个问题，用户在浏览我们制作的web页面时，如果他改变了浏览器的字体大小，或是缩放、放大页面，这时会使页面布局被打乱。

em：

em是相对单位，基准点为父节点字体的大小。上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。

例如con2的父元素为con1，css中con1和con2的font-size都设置为2em；

Paste_Image.png

可以看得出con1和con2的font-size样式都是2em，但是展现出来的字体大小不一样,因为默认情况下没有对字体进行重新设置的话，浏览器默认字体为16px，con1的2em就相当于32px，那么con2的2em就相当于con1的两倍也就是64px，所以con2字体比con1的大。

Paste_Image.png

rem

rem是相对于页面根元素的大小单位，我们只需给页面的根元素设置一个参考值，就可以在页面中根据参考值设置其他元素的大小，rem不会出现嵌套的繁琐。

设置html下1rem=10px

Paste_Image.png

可以看得出1rem就是12px(浏览器下最小的字体为12px，当设置小于12px的字体，也默认为12px)

无论元素处于哪一层，都不会受到父元素的影响。

Paste_Image.png

pc端各大网站顶部样式

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端导航

现在看下各大网站的导航使用的字体，大小，颜色，背景色

Paste_Image.png

统计了一下：导航使用最多的字体大小为14px，15px，16px最多，字体几乎都是微软雅黑，导航栏字体为白色，灰白色居多，背景色一般都为深色背景搭配白色字体或浅色字体，浅色背景搭配深色字体

代码如下

.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最多，大多数以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;}

手机端导航，标题，正文

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;}