移动端重构实战系列1——基础知识

距离上个移动端重构系列已是两年了(不得不感叹时间是把杀猪刀)。这次将会带来实战系列,将欠下两年的债现在还上,给七年的重构赋予一次新生。

既然是新的开始,先简单说下这个系列要用到的一些技术吧。同时也是对移动端重构一些技术的一个简单回顾。

viewport

关于viewport详细请参考移动前端开发之viewport的深入理解

<meta name="viewport" content="width=device-width, initial-scale=1.0">

css3选择器

结构伪类选择器已经成为列表类的标配了,不掌握都不好意思切页面了。

伪元素(::before, ::after)

我会告诉你,下面的retina 1px大多数都是采用伪元素来生成的,除此之外,还有更多实用的,我会在接下来的重构教程中演示

百分比

据说百分之八十的人入门移动端重构的第一个问题就会问:是不是所有的当要用百分比单位啊。这可以从侧面可以反应出百分比有多重要,下面是关于

新单位——rem,vw,vh...

接上第一个问题,第二个问题是:那是不是要用rem?

PS:然而,我们这个系列的教程并没有用到以上这些高大上单位,不过你还是需要了解,尤其是下面的vw, vh系列的单位,因为以后将会是个得力的助手

flex

不用多介绍,大名如雷贯耳。传说中的布局利器,听说学好这个分分钟搞定页面,一边撩汉/妹子,一边切页面不是笑谈。

retina 1px

用一首来说就是”眼前的黑不是黑,你说的1px是什么1px“,下面就是各种奇淫技巧实现:

PS: 安卓4.3- 不支持background-size的百分比,所以选用这个办法的要三思,另ios9已经实现@support,所以配合0.5px,实现起来就更简单了,下面附上sandal中的mixin定义:

// retina border
// 0.5px实现 ios9
@mixin retina-one-px() {
    @supports (border-width: 0.5px) {
        @media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
            border-width: 0.5px;
        }
    }
}

fixed

除了曾经的1px不再是1px,曾经的fixed也不再是我们熟悉的fixed了,再搞下去都要得fixed恐惧症了。

首先css3的transform等给我们带来了fixed的相对定位问题,其次虚拟键盘的弹出也给fixed制造出各种bug(有的虚拟键盘会改变窗口大小,而有些非默认的虚拟键盘则是以弹层的形式覆盖在上面的,所以并没有改变窗口大小,也就没有办法通过window的onresize事件来监听了)

我们现在一般android采用fixed布局;ios采用absolute,然后中间滚动使用-webkit-overflow-scrolling: touch;。如果还不行就具体问题具体分析。

图片高度占位

跟pc的不一样,移动端的图片很多都不是固定的宽高的(icon图标与头像等一些小图还是固定大小的),所以就面临一个问题:不能设置一个具体的高度,于是就会出现加载过程其他内容随着图片的加载慢慢向下移动。

那如何解决这个问题呢?

给图片提供一个容器,设置高度为0,根据宽度按照图片的比例使用paddin-top得到一个高度值,然后图片绝对定位设置宽高为100%即可,如图片尺寸为200*100(则高度为宽度的二分之一):

.img-wrap{
    position: relative;
    height: 0;
    padding-top: 50%;// 图片宽度的一半
}
.img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

居中

居中,居中,还是居中,重要的话说三次!!!

这里除了之前css2时代的常规方法,我们更多的使用css3的transform及flex方法,而img或video的最新object-position还得等待兼容的时代

等分

这个跟前面的居中一样一样一样重要的,几乎打开一个页面就可以看到。上次在imweb上也发起了关于这个的一个问题讨论—— item宽度固定,剩余间距等分实现方案探讨

目前等分大概分为三种:

  • 不考虑间距,item等分
  • 间距为固定值如10px,剩余宽度item等分
  • item宽度为固定指,剩余间距平分

这次我将会在这个实战系列中把这三种情况一一剖析。

css3动画

这年头不会一两招css3动画,都不好意思说自己会css了。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏夏时

又挖到了一个天气Api接口(附使用示例)

1264
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

3386
来自专栏编程

小白必知什么是css和盒模型

CSS盒模型概念 CSS 盒模型也叫框模型 (Box Model) ,包含了元素内容(content)、内边距(padding,也叫填充)、边框(border)...

1807
来自专栏编程微刊

【前端统计图】echarts实现简单柱状图项目地址下载:

1584
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

882
来自专栏前端笔记

【 前端相关 网页布局 】探讨CSS3中 “垂直居中” 问题

“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中实现垂直居中。” —— James Anderson 难题 在 CSS 中对元素进行水平居...

2657
来自专栏星回的实验室

CSS闭合浮动

一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动

712
来自专栏前端架构

CSS3 transform对普通元素的N多渲染影响

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wor...

682
来自专栏前端知识分享

第18天:京东网页头部制作

一、京东页面制作开始(头部) 1、浮动的盒子宽度由内容定,不需要设置宽度 2、绝对定位不占位置,相对定位占位置

722
来自专栏我的博客

安卓开发之布局

一、LinearLayout(线性布局) android:orientation=”horizontal”(从左到右) android:orientation=...

2987

扫码关注云+社区