移动端H5知识[系列] - fixed定位模式与其他

TML5学堂：移动端H5知识普及 - fixed定位模式与其他。虽然知识小，但是不得不承认的是，它们很重要~！本文会讲解到fixed的定位模式，另外，关于line-height的细节知识也会在这里提到。另外就是给出网络字体的相关知识，并扯扯美工图设计的基准字体。

先要说的话

首先本篇会讲解到fixed的定位模式，另外，关于line-height的细节知识也会在这里提到。另外就是给出网络字体的相关知识，并扯扯美工图设计的基准字体。也算是移动端H5知识这个系列的收尾吧~

fixed定位模式

position：fixed。表示生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。务必需要注意的是fixed是针对浏览器窗口定位，而非父级。

–webkit-transform-style: preserve-3d，会对fixed定位造成影响，在向下滚动之后，fixed定位的内容位置会发生变化。在PC端，也会有布局上的影响。比较合适的解决办法就是，不要为body标签设置三维变形模式，如果需要针对元素运用三维变形，在相应父级上设置三维变形模式即可。

fixed定位的应用——让一个元素高度宽度自适应，占满整个屏幕。实例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
 html, body, div {
     margin: 0;
     padding: 0;
 }
 html, body {
     height: 100%;
 }
 .wrap {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #fcf;
     color: #39f;
 }
</style>
</head>
<body>
<div class="wrap">
 独行冰海 - 利利 - 刘国利
</div>
</body>
</html>

line-height 行高设置

在做移动端过程中，我曾经尝试过百分比的做法，那时候为了让一个文字在父级中垂直居中，必然要用到line-height。于是给其line-height设置了百分比，但是发现line-height并非是按照父级高度进行设置的，它也不是根据父级宽度设置的。后来经过测试，发现，line-height如果设置百分比，那么基于的是这个元素的字体大小，在这个字体大小基础上乘以百分比，就是line-height的值。可谓不是一般的坑啊~因此，制作移动端的时候，百分比坑多多（前面盒模型一部分也有所讲解），在制作移动端的时候，个人还是首先推荐rem。

网络字体的相关知识

随着网页的发展，网页中出现了越来越多的字体种类，原有的微软雅黑以及宋体早就无法满足设计的需要，那么，如何在网站中使用比较特殊的字体（如“华文行楷”）来装饰我们网站的部分呢？此前书写过一篇博文，感兴趣的可以直接点击查阅：《网络字体@font-face 如何处理网页中的特殊字体》

美工图设计的基准字体

当前为了让前端能够书写出兼容各个分辨率的代码，美工在做移动端设计图的时候，通常会出1080像素宽度的图。如果你的美工拿着一张320像素宽度的psd文件给你，你们老板让你去制作兼容各个分辨率的移动端代码。我建议你：“呵呵两声，然后让美工返工~”。那么对于基准字体也是有要求的。靠谱的美工不需要你去跟他沟通，因为他们本身就懂移动端的相关设计。如果美工不靠谱，那很建议你提前跟他沟通一下，以防止1080像素大小下的设计图，字体出现了12、16像素的大小……

使用rem进行制作的时候，通过JS的控制，rem是随设备宽度变化而变化的。如果想在320像素的设备宽度下，保证12像素的字体大小，在宽度1080像素的设备上，字体最少为：12 / 320 * 1080 = 40.5 。也就是最少要设置为42像素的字体大小。（注意，最小字体是12像素，不能再变小；另外字体大小都需要是偶数）