IT廉连看------Uniapp------页面样式与布局
目标:
了解样式与布局的规范
熟记px和rpx的区别
全局样式与index样式的区别
一、查看uniapp框架简介------尺寸单位
px尺寸单位的使用是贯穿始终的。
[IT廉连看]
二、尺寸单位------实操效果
1、打开Hbuilder X并进入index.vue页面
2、删除初始化代码
3、删除date中保存的数据
4、删除样式
5、删除后运行至微信开发者工具查看效果
是一个空白的效果,后边我们就可以自己添加东西啦!
6、添加一些组件,添加一些效果
6.1添加view组件,API:view+回车
添加后效果:
接下来一起添加一些样式:
200px,微信开发者工具查看效果
200rpx,微信开发者工具查看效果,发现效果不一样
为什么会有这样的问题?
知道的同学奖励一根烤肠。
咱们把像素调整成屏幕的一半来看一看,750/2
[IT廉连看]
三、样式导入简介------实操效果
样式导入:使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
html
<style>
@import "../../common/uni.css";
.uni-card {
box-shadow: none;
}
</style>
内联样式:框架组件上支持使用 style、class 属性来控制组件的样式。
-
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
html<view :style="{color:color}" />
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
html<view class="normal_view" />
选择器
目前支持的选择器有:
选择器 样例 样例描述 .class .intro 选择所有拥有 class="intro" 的组件 #id #firstname 选择拥有 id="firstname" 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后边插入内容,仅 vue 页面生效 ::before view::before 在 view 组件前边插入内容,仅 vue 页面生效 注意:
-
在
uni-app
中不能使用*
选择器。 -
微信小程序自定义组件中仅支持 class 选择器
-
page
相当于body
节点,例如:html<!-- 设置页面背景颜色,使用 scoped 会导致失效 -- > page { background-color: #ccc; }
-
进入全局样式的编写
注:在这里编写的样式,在各个页面都可以使用。
添加全局使用的样式:如背景颜色、全局使用的字体大小
随后回到index.vue文件中给它起一个class名,title。
小提问:
如果我们也在index中写了一个title,那么它会优先使用哪个样式呢?那么它们的区别在哪里?
[IT廉连看]
扫盲:
这里是用来写自定义组件的地方。
html
<template>
<view>
这是一个自定义组件
</view>
</template>
<script>
</script>
<style>
</style>
小结:
px和rpx的区别
全局样式与index样式的区别
[IT廉连看]