首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道。
说来惭愧,做了几年 pc 端的前端开发,很少接触到 webapp 的移动端开发。如今有机会参与 webapp 的开发,发现与 pc 端开发还是有一些区别的。
例如,移动端的浏览器要么是 Android 的 chrome,要么是 ios 的 safari;可以发现:他们都是基于 webkit 内核的。而也有使用 windows phone 的手机(ie 的那一套),但是从市场使用上来看,其可以忽略不计。因此做移动端的前端开发有一些特别之处:
诚然,移动端开发不需要过多考虑浏览器的兼容性,但是它却有自己特有的问题:需要兼容各种不同品牌不同型号的机型设备,尤其是 Android 系统更是如此。 移动端兼容各种设备的技术不是本文谈论的问题,有兴趣的可以自行 google。下文就分享一些移动端开发中涉及到的样式。
是 css3 的中一个样式属性,看到这个属性一定会想到
- rem
属性,二者极为类似:
- em
为相对于父元素 font-size 大小而言的;而
- em
是相对于根元素
- rem
的 font-size 而言的。
通过
,意味着一旦 html 元素的 font-size 大小确定,基于
- rem
的页面元素相关属性就能确定,当然改变 html 元素的 font-size 大小,相对于它而言的元素大小跟着变化。
- rem
主要为 web app 下解决移动端响应式布局,实现自适应布局。那么,
- rem
如何解决移动端不同设备因不同宽度而实现自适应布局的呢?
- rem
一个基于 iphone5 设备宽度来计算 html 元素 font-size 大小的 js 脚本如下:
- (function (doc, win) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (!clientWidth) return;
- docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
- };
- if (!doc.addEventListener) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false);
- })(document, window);
这样就可以根据不同设备来调整 html 的 font-size 了,如 iphone6 设备宽度为 375px,则 iphone6 下的 1rem = 23.4375px(即 20*(375/320) );
有关 rem 的,可以参考这篇文章
是一个伪元素,可用来设置表单元素的
- -webkit-input-placeholder
文字的展现样式。从名字上可以看出,这个属性只支持 webkit 内核的情况,由于移动端的特殊性,知道 webkit 内核可以使用它即可。
- placeholder
考虑这样一种 case:表单 input 元素的 placeholder 在没有内容时显示一种样式,有内容时是另一种样式,例如下图这样:
这个时候,不知道表单元素的 placeholder 可以配置伪元素样式
时可能会这样实现:根据 input 元素的值是否为空来添加不同的样式 class。
- -webkit-input-placeholder
这种实现不仅要改 css 还要改 js 代码,明显效率低下。换成
来实现,明显感觉 big 格高大上有没有。上图对应代码如下:
- -webkit-input-placeholder
- input::-webkit-input-placeholder{
- font-size: 16px;
- color: #fc9153;
- }
除了上面设置 placeholder 的字体、颜色,你甚至还可以设置其动画效果。但是需要注意一点:
例如上面代码在 Firefox 和 ie 下实现如下:
- input:-ms-input-placeholder{
- font-size: 16px;
- color: #fc9153;
- }
- input::-moz-placeholder{
- font-size: 16px;
- color: #fc9153;
- }
是 css3 中出现的一个设置文本样式属性的,相信大家都知道它的用法,即容器元素内的文本元素超过容器指定的宽度后设置文本溢出显示方式,默认是剪切文本内容。;
- text-overflow
其中,
属性值有 3 个:
- text-overflow
: 溢出的文本被剪切掉,默认的值
- clip
: 溢出的文本用省略号显示
- ellipsis
: 用给定的字符串来显示溢出的省略号,这项各浏览器支持的不是很好,一般不用
- string
当然移动端最常用的还是文本溢出时,用省略号显示溢出的内容。使用该 css 样式的父元素还需要配合以下几个样式来实现溢出文本省略号显示,具体如下:
- overflow: hidden;
- /*超过容器指定范围隐藏*/
- text - overflow: ellipsis;
- /*设置溢出内容省略号显示*/
- white - space: nowrap;
- /*容器不换行*/
看到上面的问题,你可能以为你掌握了该属性用法,但是有一个地方很容易被忽略,即:
例如下面代码中
容器块设置的
- container
根本不起作用,因为其直接子元素都是块元素没有一个内联元素的文本。
- ellipsis
- <style>
- .container{
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 50px;
- }
- .container span{
- display: inline-block;
- }
- </style>
- <p class="container">
- <span>...</span>
- <span>...</span>
- <span>...</span>
- </p>
chrome 对于简体中文版浏览限制最小字体大小为 12px,
样式设置小于 12px 字体时都是无法生效的。 在 chrome27 版本之前,可以使用 webkit 内核的私有属性
- font-size
为 none 来解决。但是可能由于
- -webkit-text-size-adjust
属性经常被滥用,导致页面放大后页面字体不能随之改变,导致可用性降低;为此 chrome 不在支持该属性。
- -webkit-text-size-adjust
既然无法再通过
来控制设置字体大小,那么就应该有其他方式来解决这一问题,不过目前并没有官方的解决方案,通常的做法是通过 css3 的
- -webkit-text-size-adjust
缩放来实现设置小于 12px 的字体。例如下面例子:
- transform: scale()
- <style>
- .mini-font{
- font-size: 10px;
- transform: scale(0.8);
- -webkit-transform: scale(0.8);
- }
- </style>
- <p class="mini-font">这是小于12px的字体</p>
这样,就可以设置页面中小于 12px 的字体了,不过使用 css3 的
属性时需要注意以下 2 点:
- transform
行级块元素在宽度允许的话会一行显示,它不会像块元素独自占用一行,除此之外其与块元素的表现是一样的,设置块元素的 css 样式它都适用。
- inline-block
不过在使用
元素时,相信大家会遇到这样的问题:
- inline-block
元素间会莫名其妙的产生一定的间距。
- inline-block
借用讲述的列子来说明,可能会产生下面的情况:
- <input />
- <input type="submit" />
或者
- <input />
- <input type="submit" />
这是怎么情况,看到这节的标题也能知道,引起这种情况的主要原因是:
那么,既然知道了是什么导致这个问题,那么就可以对症下药了,大概方法有:
方法:设置
- font-size
元素自己的
- inline-block
和其父元素的
- font-size
- font-size:0
: 设置
- letter-spacing
元素自己的
- inline-block
和其父元素的
- letter-spacing: 0
为具体的某个负值
- letter-spacing
, 方法同
- word-spacing
- letter-spacing
这篇文章描述了很多方法,具体可以参考这篇文章。
来源: