HTML5学堂-码匠 HTML5学堂

您当前位于:移动端开发 ——> 移动端开发知识[系列] - fixed定位模式与其他

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

2015/05/04 11:49:55 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:移动端,定位,fixed,固定定位

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

HTML5学堂:移动端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定位的应用——让一个元素高度宽度自适应,占满整个屏幕。实例:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>H5course</title>
  6.     <style>
  7.         html, body, div {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         html, body {
  12.             height: 100%;
  13.         }
  14.         .wrap {
  15.             position: fixed;
  16.             top: 0;
  17.             left: 0;
  18.             right: 0;
  19.             bottom: 0;
  20.             background: #fcf;
  21.             color: #39f;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="wrap">
  27.         独行冰海 - 利利 - 刘国利
  28.     </div>
  29. </body>
  30. </html>

line-height 行高设置

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

欢迎沟通交流~HTML5学堂

网络字体的相关知识

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

美工图设计的基准字体

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

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端