移动端重构1:基础知识

最新推荐文章于 2025-09-10 14:51:55 发布

转载最新推荐文章于 2025-09-10 14:51:55 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qiao20/p/8608086.html

文章标签：

#移动开发 #前端 #ViewUI

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

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

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;
        }
    }
}