移动端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 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

轻松生成小程序分享海报

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生...

1243
来自专栏图形学与OpenGL

CG实验1 三角形绘制

请参考教材博客网页文章:《WebGL画点程序v1-3》,《 WebGL绘制三角形》,具体见:http://blog.csdn.net/wpxu08

783
来自专栏极客编程

html5 canvas 与小丑。

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序...

542
来自专栏小古哥的博客园

关于面试的一些问题合集

一、css方面 1、盒子模型在IE上有何不同? 盒模型分为:W3C标准盒模型和IE盒模型 W3C 盒子模型的范围包括 margin、border、padding...

2596
来自专栏雨过天晴

转 Android设置虚线、圆角、渐变

1353
来自专栏用户2442861的专栏

CSS基础(四):盒模型

HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距marg...

803
来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2149
来自专栏前端知识分享

第118天:移动端开发——视口

上述代码相信大家在做移动端开发时经常去书写。它研究了两个内容:meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解...

662
来自专栏十月梦想

最大宽度最小宽度

    css3又加入了min-width,min-height,max-with,max-height等属性

553
来自专栏君赏技术博客

AutoLayout简洁之道

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。 2.是进行两个试图进行约束的 3.是对于单个试图进行约束的,默认相对于父试图。 4.是对于约...

792

扫码关注云+社区