移动端H5页面制作规范

计量单位的使用

css的计量单位有三种选择:

  • px: 固定的相素值
  • em: 相对父级元素的font-size设置来作为当前元素1em所代表的像素值,如父节点的font-size:10px,当前节点的font-size:1.2em,则当前节点的font-size实为12px;
  • rem:相对根节点html的font-size设置来作为当前元素1rem所代表的像素值,与em的区别就是rem的基本度量单位与父节点无关,只与根节点font-size的设置有关,如设置html{font-size:10px;}后当前dom所有节点的1rem都表示10px;

移动端开发中我们使用rem作为基本计量单位,同时将根节点默认字号大小设为font-size:62.5%,因移动端浏览器默认字号大小为16px;16*62.5%刚好为10px; 具体设置方法及使用示例

html{font-size:62.5%;/*刚好为10px;*/}
#example{font-size:1.2rem}/*设置#example的字体大小为12px;*/
#example div{font-size:1.4rem; width:10rem;height:10rem}/*设置#example子节点div的字体大小为14px;宽度为100px;高度100px*/
  • 安卓下