快应用页面样式与布局

快应用页面样式与布局

在课程的大纲

• 盒模型
• 长度单位
• 设置样式
• Flex布局示例
• 动态修改样式
• 引入less预编译

盒模型

框架使用border-box模型，暂不支持content-box模型与box-sizing属性

布局所占宽度Width:

width = width(包含padding-left+ padding-right +border-left + border-right)

布局所占宽度Height:

Height = height(包含padding-top + padding-bottom +border-top + border-bottom)

长度单位

框架目前仅支持长度单位 px 和 %。与传统web页面不同，px是相对于项目配置基准宽度的单位。

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

项目配置基准宽度：项目的配置文件（/src/mainfest.json）中config.designWidth的值，默认为750

若设计宽度为640px,元素A在设计稿的宽度为100px，实现的两种方案如下：

1.框架样式1px 等于 设计稿1px

修改/src/mainfest.json中，修改config.designWidth:

{
    "config": {
        "designWidth": 640
    }
}

2.不修改项目配置基准宽度：若当前项目配置的 基准宽度为 750，
设计稿宽度100px,在框架为 100 / 640 = x / 750 推出：x = 117

在框架宽度为：117px

设置样式

开发可以使用 内联样式、tag选择器、class选择器、id选择器来为组件设置样式

同时也可以使用 并列选择、后代选择器设置样式

Flex布局示例

框架使用Flex 布局，div作为Flex容器组件，具有Flex布局的特性；text、a、span、label组件为文本容器组件，其它组件不能直接放置文本内容。

动态修改样式

动态修改样式有多种方式。与传统前端开发习惯一致，包括但不限于以下两种：

• 修改class: 更新组件的class属性中使用的变量的值
• 修改内联style:更新组件的style属性中的某个CSS的值

引入less预编译

首先要安装相关库的：less、less-loader

在终端用命令：

sudo npm install -g less
sudo npm install -g less-loader

安装成功后，可以用lessc -v查看版本号

使用外部的less style 示例如下：