pc端web、移动端web的字体大小、颜色、字体样式使用

pc端web、移动端web的字体大小、颜色、字体样式使用

pc端web、移动端web的字体大小、颜色、字体样式使用

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

px：

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

em：

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

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

.png

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

.png

rem

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

设置html下1rem=10px

.png

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

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

.png

pc端各大网站顶部样式

.png

顶部字体大小：使用最多的为12px，颜色：基本上为灰白色，白色，字体样式：微软雅黑，Arialpc端web、移动端web的字体大小、颜色、字体样式使用，代码如下

 .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端导航现在看下各大网站的导航使用的字体，大小，颜色，背景色

.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端正文

.png

字体:以14px和12px最多，大多数以14px作为正文的大小，字体颜色：使用#666和#333最多，字体样式：微软雅黑，

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

手机端导航，标题，正文

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

.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: "微软雅黑";}

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

最后编辑于 ：2017.12.05 06:01:15

©著作权归作者所有,转载或内容合作请联系作者

【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。