1、Flex布局简介
1) Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
![](https://i-blog.csdnimg.cn/blog_migrate/7b0a78feb9c7e19cdb4e12a2919b26b2.png)
2) 任何一个容器都可以指定为Flex布局。
3) display: ‘flex’
flex-direction:
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
![](https://i-blog.csdnimg.cn/blog_migrate/41bfce6581de275510c5b715187ecef8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1f8d631458d5738130c0b6134eb0f0f4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/02330c6703e64d778a17bb4bb4600b8f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b3f3bed639b805cc7114f423e2fd1762.png)
2、移动端适配
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6
上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px =1物理像素。
![](https://i-blog.csdnimg.cn/blog_migrate/215838ff54531a18ebd9462dd1b8beec.png)
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
<view style="width:400rpx;height:300rpx;border:1px solid black">测试RPX</view>
<view style="width:200px;height:300px;border:1px solid black">测试PX</view>
3、小程序版CSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对CSS 进行了扩充以及修改。
选择器
目前支持的选择器有:
![](https://i-blog.csdnimg.cn/blog_migrate/2e3359dc5156276409581820cc35a171.png)
样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};"/>
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view"/>
案例:
在项目根目录下创建文件夹styles,然后在它下面创建文件comm.wxss,写入以下样式
![](https://i-blog.csdnimg.cn/blog_migrate/dd348b15dbde3178759a426d7c0db57f.png)
在index.wxss中引入样式文件
![](https://i-blog.csdnimg.cn/blog_migrate/92230847b9ed6190d6651a3473597e8c.png)
在index.js中定义样式变量
![](https://i-blog.csdnimg.cn/blog_migrate/df72e1dcaa4bfbdd395be54439152a9f.png)
在index.wxml中使用内联样式,看到效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/338155b47ebc3135705591918de819fd.png)
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
四大祸根:酒是穿肠毒药,色是刮骨钢刀,气是下山猛虎,钱是惹祸的根苗