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

viewport

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

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

css3选择器

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

• CSS3 选择器——属性选择器
• CSS3 选择器——伪类选择器
• css选择器支持一览表
• CSS选择器查阅

伪元素（::before, ::after）

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

• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
• 学习使用：before和：after伪元素
• 伪元素的content使用

百分比

听说百分之八十的人入门移动端重构的第一个问题就会问：是否是全部的当要用百分比单位啊。这能够从侧面能够反应出百分比有多重要，下面是关于

• 关于移动端百分比宽度的几种实现

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

接上第一个问题，第二个问题是：那是否是要用rem？

• CSS3的REM设置字体大小
• rem不是神农草，治不了移动端百病
• vw, vh等新单位介绍（安卓4.4+支持）

然而，咱们这个系列的教程并无用到以上这些高大上单位，不过你仍是须要了解，尤为是下面的vw, vh系列的单位，由于之后将会是个得力的助手

flex

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

• 一个完整的Flexbox指南
• Flex 布局教程：语法篇
• A Complete Guide to Flexbox

retina 1px

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

• 在retina屏中实现1px border效果
• Retina屏的移动设备如何实现真正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事件来监听了）

• Web移动端Fixed布局的解决方案
• 深刻理解CSS中的层叠上下文和层叠顺序

咱们如今通常android采用fixed布局；ios采用absolute，而后中间滚动使用-webkit-overflow-scrolling: touch;。若是还不行就具体问题具体分析。

图片高度占位

跟pc的不同，移动端的图片不少都不是固定的宽高的（icon图标与头像等一些小图仍是固定大小的），因此就面临一个问题：不能设置一个具体的高度，因而就会出现加载过程其余内容随着图片的加载慢慢向下移动。

那如何解决这个问题呢？

给图片提供一个容器，设置高度为0，根据宽度按照图片的比例使用padding-top获得一个高度值，而后图片绝对定位设置宽高为100%便可，如图片尺寸为200*100（则高度为宽度的二分之一）：

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

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

居中

居中，居中，仍是居中，重要的话说三次！！！

这里除了以前CSS2时代的常规方法，咱们更多的使用CSS3的transform及flex方法，而img或video的最新object-position还得等待兼容的时代

• Centering in CSS: A Complete Guide
• object-fit

等分

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

目前等分大概分为三种：

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

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

css3动画

这年头不会一两招CSS3动画，都很差意思说本身会CSS了。

• css3 transform 101
• Advanced CSS3 2D and 3D Transform Techniques
• css3 transtion 101
• css3 animation 101
• CSS3: Animations vs. Transitions
• css3动画疑难杂症一览

 

出处：http://www.w3cplus.com/mobile/basic-knowledge-of-mobile.html