学习旧岛小程序（3）组件的样式

(1)单位要用 rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

需要根据不同的情况决定使用 rpx 还是 px

绝大部分情况下使用rpx

少部分情况如字体的大小设置body 的情况

(2)字体设置：

苹果默认字体是平方

安卓默认字体是思源

小程序全局设置样式是 app.wxss

小程序会在外部自动的添加一个 page 我们可以利用这里做一些全局样式

(3)组件样式的继承：

color font

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

(4)组件之间最好不要留空白间距减少使用 padding

(5)元素设置flex 并不会让它变成block 会让它的子元素变成 block 它本身的块状元素不会被取消

display:inline-flex; 会让元素的宽度自适应

转载于:https://www.cnblogs.com/guangzhou11/p/11272759.html

学习旧岛小程序（3）组件的样式相关推荐

学习旧岛小程序（2）自定义组件
(1) 新建组件新建组件目录下的文件名字可以与目录不一样 (2)引用组件在引用的组件的 .json 添加配置 { "usingComponents": { "like ...
学习旧岛小程序（5） observer 函数中修改属性的值
不要在一个属性的 observer 函数中修改属性的值不然会造成内存泄露错误代码: properties: {/* 期刊号 */index: {type: String,observer: fu ...
学习旧岛小程序（5）自定义组件的自定义事件
自定义组件的触发事件: 自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名.detail对象和事件选项: this.triggerEvent('like', { behavio ...
学习旧岛小程序（4）电影组件的实现
先编写基本的页面架构 <view class="classic-container"> <image src="{{img}}" class= ...
学习旧岛小程序（4）封装api 请求
1.配置基本的请求路径和 key config.js const config = {baseUrl: 'http://bl.7yue.pro/v1/',appkey: "" ...
学习旧岛小程序（1） flex 布局
css : view 相当于 div 块级元素 display 默认设置 block display:inline 设置后设置宽度高度是无效的要设置宽度高度又要设置为行内元素我们设置: (1) ...
微信旧岛小程序章节目录
索引第一章申请appkey ## 标题##我是标题第二章准备工作小程序开发工具介绍和第三方开发工具介绍第三章小程序基础知识与新特性 1.小程序的4种文件类型 2.小程序的组织结构 3 ...
解决微信小程序自定义组件后样式失效不起作用的问题
问题如图: 解决方式: 子页面js的Component()中添加: options: {addGlobalClass: true }, 至此发现样式生效了呢! 我是一条随风飘摇的结尾符~~~~~
微信小程序组件和slot_微信小程序自定义组件详解
自定义组件能够帮我们更好的复用代码和重构简化代码复杂度.一起来学习一下小程序自定义组件的内容吧. 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版 ...

学习旧岛小程序（3）组件的样式

学习旧岛小程序（3）组件的样式相关推荐

最新文章

热门文章

学习旧岛小程序 （3）组件的样式

学习旧岛小程序 （3）组件的样式相关推荐

最新文章

热门文章

学习旧岛小程序（3）组件的样式

学习旧岛小程序（3）组件的样式相关推荐