【移动端】Flex+vw进行布局

快乐水续航

已于 2022-04-08 08:56:03 修改

阅读量1k

点赞数

分类专栏：移动端文章标签：前端 javascript html5 css3

于 2022-04-07 19:56:22 首次发布

本文链接：https://blog.csdn.net/m0_57135756/article/details/124024837

版权

本文介绍了移动端项目中使用Flex布局和vw单位实现自适应页面设计，结合ACSS（Atomic CSS）提升样式复用和维护性。通过jQuery的ajax请求数据，并利用art-template模板引擎进行数据渲染，实现前后端交互。文章还涵盖了模板引擎的使用方法及按钮交互的实现。

摘要由CSDN通过智能技术生成

移动端页面demo

1. 项目介绍

项目共包含三个页面

首页
设备页
我的

每个页面都有一个公共的底部Tab，把footer放到每一个页面中。

这是一个移动端项目，为了适应移动端设备，需要首先自适应的布局，布局方式，主要使用了flex弹性盒和vw作为单位。

项目开发分为两个阶段，第一阶段，实现页面布局，第二阶段，通过jQuery的ajax，请求数据，然后使用art-template模板引擎渲染。

2. 页面布局实现

2.1单位

页面布局主要使用了flex和vw技术。flex这里不多说，主要讲下vw。

vw也是一种相对单位，它把页面宽度分成100份，每一份的大小就是1vw。这样当所有元素大小都是用vw作为单位时，页面缩放的时候，元素大小也就会实现同步缩放。

具体到本项目来说，我们按照宽度为750px来计算。

100vw = 750px

所以: 1vw = 7.5px

比如，设计图中，某个元素的宽度为30px,那么使用vw表示就是 4vw,某个文字大小为24px,则使用vw表示为3.2vw。

2.2 ACSS

随着项目的开发，样式代码也会越来越多，为了规范css命名方式，出现了很多css命名规范，例如：BEM, OOCSS，AMCSS，SMACSS，SUITCSS，ITCSS，ACSS等。

关于BEM命名规范，大家可以参考这个链接学习：https://bemcss.com/

这里我们重点说下ACSS。

什么是ACSS

ACSS 即： Atomic CSS，是一套将样式原子化的方式。

什么意思呢？首先让我们思考这样一个场景：

比如要定义一双球鞋，球鞋有很多属性，比如：品牌，尺码，颜色，重量，季节，材料等。

如果用以前的方式定义样式，那写出来就是：

球鞋A{
品牌："李宁";
尺码：42;
颜色：红色;
重量：300g;
季节：夏季;
材料：䨻;
}

好，然后又有第二双鞋：

球鞋B{
品牌："匹克";
尺码：42;
颜色：红色;
重量：280g;
季节：夏季;
材料：态极;
}

我们发现在这两双球鞋的属性中有很多相同的属性，比如颜色，季节等，但是在定义每双鞋的时候要重复写一遍，如果还有第三双，第四双鞋，任然有可能有重复的属性，可能是这两个属性，也可能是其他属性，那么有没有办法更好的复用这些属性呢？

当然有，就是我们接下来要介绍的ACSS。

ACSS这种方式将CSS属性进行原子化，也就是一个属性定义成一个类！

比如定义球鞋的时候，有品牌，尺码，颜色，重量，季节，材料等这些属性，那就可以定义为：

.brand-ln{
   
品牌：李宁;
}
.brand-pk{
   
品牌：匹克;
}
.size-42{
   
尺码：42；
}
.size-43{
   
尺码：43；
}
.color-red{
   
颜色：红色；
}
.seazon-sum{
   
季节：夏天；
}
.material-beng{
   
材料：䨻；
}
.material-tj{
   
材料：态极；
}

当这些原子化的类定义好之后，一双李宁，红色，夏天穿的，采用了䨻材料的42码球鞋就表示为：

<球鞋   class="brand-ln color-red seazon-sum material-beng size-42" />

而一双匹克，同样红色，夏天穿的，采用了太极科技材料的43码鞋就表示为：

<球鞋   class="brand-pk color-red seazon-sum material-tj size-43" />

看明白了吗？

这样虽然貌似定义了很多类，但是可以在最大程度上复用这些类，而且不用在费尽心机去想元素的类名了。还有就是，之前我们会经常采用父子嵌套的方式定义样式，比如： .banner div ul li h1。这种方式一但DOM结构发生变化，那么样式就很容易出问题，给后期迭代维护造成不便。

在本次项目中，我们就讲采用ACSS的方式来定义样式。

ACSS 在项目的应用

比如下面的样式，我们就采用了ACSS的方式定义了一组文本大小的样式：

/* 按照屏幕宽度 750px 计算 1vw = 7.5px */
.f-60 {
   
    font-size: 8vw;
}

.f-54 {
   
    font-size: 7.2vw;
}

.f-40 {
   
    font-size: 5.3vw;
}

.f-34 {
   
    font-size: 4.5vw;
}

.f-32 {
   
    font-size: 4.3vw;
}

.f-30 {
   
    font-size: 4vw;
}

.f-28 {
   
    font-size: 3.7vw;
}

.f-26 {
   
    font-size: 3.5vw;
}

.f-24 {
   
    font-size: 3.2vw;
}

.f-20 {
   
    font-size: 2.7vw;
}

.f-22 {
   
    font-size: 2.9vw;
}