IT廉连看——Uniapp——页面样式与布局

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后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";
​
    .uni-card {
        box-shadow: none;
    }
</style>

​

内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

  <view :style="{color:color}" />

  class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

  <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 节点，例如：

    <!-- 设置页面背景颜色，使用 scoped 会导致失效 -- >
      page {
        background-color: #ccc;
    }

进入全局样式的编写

注：在这里编写的样式，在各个页面都可以使用。

添加全局使用的样式：如背景颜色、全局使用的字体大小

随后回到index.vue文件中给它起一个class名，title。

小提问：

如果我们也在index中写了一个title，那么它会优先使用哪个样式呢？那么它们的区别在哪里？

[IT廉连看]  

扫盲：

这里是用来写自定义组件的地方。

<template>
    <view>
        这是一个自定义组件
    </view>
</template>
 
<script>
</script>
 
<style>
</style>

小结：

px和rpx的区别

全局样式与index样式的区别

[IT廉连看​]