移动端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像素,不能再变小;另外字体大小都需要是偶数)

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

条件选择css

411
来自专栏BestSDK

shift键在Excel中,还有这10种变态玩法?

电脑键盘上有很多「瑞士军刀」似的按键,掌握这些按键的使用技巧,你让你在Excel操作中,如虎添翼。 SHIFT键就是其中之一。 Excel中的技巧有很多,基本都...

3387
来自专栏熊二哥

Html与CSS快速入门01-基础概念

Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间。最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下。内容相对都比较简单,...

1887
来自专栏web编程技术分享

第五节 关于浮动和清除浮动的解说,以及两个大坑不要踩

3207
来自专栏理论坞

那些你不知道的Ps冷知识②——乾坤大挪移

在大家使用PS时,滚轮这个东西实际上并不常用,但一个滚轮加上三功能键却可以完全实现缩放和平移、纵移、调整数值等功能。

623
来自专栏阿凯的Excel

Excel这样分奖金

有朋友问我如何能将下面的表分奖金~ ? 其实我内心是拒绝的~ 要是我的名字在里面,我会很开心的帮他做的,然而,并没有! 有激励金额,还有百分比,两者直接相乘...

3137
来自专栏前端架构与工程

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求: 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致,则以图片中心为基点等比缩放背景图片,以适应屏幕尺寸。 以上需求...

1845
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

1032
来自专栏Python爱好者

Python绘制分形树(一)

1178
来自专栏偏前端工程师的驿站

CSS魔法堂:再次认识font

一、前言                                 文字承载着站点内涵,而良好的字体、排版则为用户提供舒适的阅读体验。本文打算对字体稍微深...

20010

扫描关注云+社区