app的css布局单位,uni-app页⾯样式与布局
重要说明请删除 app.vue 中的全局样式：
view{display:flex;}
在需要flex的时候使⽤flex即可。尺⼨单位
uni-app框架⽬前仅⽀持长度单位 px 和 %。与传统 web 页⾯不同，px 是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于rem。
PS：uni-app 的基准宽度为 750px。
开发者只需按照设计稿确定框架样式中的 px 值即可。设计稿 1px 与框架样式 1px 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式1px / 750px
换⾔之，页⾯元素宽度在uni-app中的宽度计算公式：
750px * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在uni-app⾥⾯的宽度应该设为：750 * 100 / 640，结果为：117px。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在uni-app⾥⾯的宽度应该设为：750 * 200 / 375，结果为：400px。
样式导⼊
使⽤@import语句可以导⼊外联样式表，@import后跟需要导⼊的外联样式表的相对路径，⽤；表⽰语句结束。
⽰例代码：
@import "../../common/uni.css";
cssclass属性.uni-card {
box-shadow: none;
}
内联样式
框架组件上⽀持使⽤ style、class 属性来控制组件的样式。style：静态的样式统⼀写到 class 中。style 接收动态的样式，在运⾏时会进⾏解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
class：⽤于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间⽤空格分隔。
选择器⽬前⽀持的选择器有：.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有⽂档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插⼊内容，仅⼩程序和5+App⽣效
::before view::before 在 view 组件前边插⼊内容，仅⼩程序和5+App⽣效
全局样式与局部样式定义在 App.vue 中的样式为全局样式，作⽤于每⼀个页⾯。在 pages ⽬录下 的 vue ⽂件中定义的样式为局部样式，只作⽤在对应的页⾯，并会覆盖 App.vue 中相同的选择器。
注意： App.vue 中通过 @import 语句可以导⼊外联样式，⼀样作⽤于每⼀个页⾯。
Flex布局
为⽀持跨平台，框架建议使⽤Flex布局，关于Flex布局可以参考外部⽂档A Complete Guide to Flexbox等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。