原生小程序--初始化页面样式--（屏幕适配rpx）

╰+攻爆jí腚メ 2023-02-18 12:56 28阅读 0赞

> 在styles/新建flex.wxss文件  
> flex.wxss文件添加到app.wxss文件中，对自定义组件样式没有效果  
> 解决方法：将flex.wxss文件添加到自定义组件的样式文件中：

@import "../../styles/flex.wxss";

>     .u-f,
>     .u-f-ac,
>     .u-f-ajc {
>     	display: flex;
>     }
>     .u-f-ac,
>     .u-f-ajc {
>     	align-items: center;
>     }
>     .u-f-ajc {
>     	justify-content: center;
>     }
>     .u-f-jsb {
>     	justify-content: space-between;
>     }

`app.wxss`页面中

/* 引入外部文件 */
    @import "./styles/iconfont.wxss";
    @import "./styles/flex.wxss";
    
    page,
    view,
    text,
    swiper,
    swiper-item,
    image,
    navigator {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* 
    主题颜色通过变量来实现
    1. less中存在变量这个知识；原生的css和wxss也是支持变量
    2. 在页面的样式文件wxss文件中，使用方法： color: var(--themeColor);
    */
    page {
        /* 定义主题颜色 */
        --themeColor: #eb4450;
        
         /* 
        定义统一字体大小：假设设计稿：375px 、假设对应的根字体设置为 14px
        	1px = 2rpx ; 14px = 28rpx
        */
        font-size: 28rpx;
    }
    
    image {
        width: 100%;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关屏幕适配

https://feisher.github.io/ScreenAdapter/ 根据我多年的开发经验，适配分为三个方向： 1.屏幕适配 2.机型适

淩亂°似流年/ 2023年10月17日 22:02/ 0 赞/ 46 阅读

相关屏幕适配

屏幕适配如何在编辑器中正确预览以及如何适配不同尺寸的UI 设置尺寸根据规则设定屏幕显示比例设置屏幕显示尺寸

我不是女神ヾ/ 2023年06月21日 12:24/ 0 赞/ 27 阅读

相关微信小程序（四）屏幕适配

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。如图所示，同一个元素，在不同宽度的屏幕

红太狼/ 2023年02月22日 12:29/ 0 赞/ 37 阅读

相关原生小程序--初始化页面样式--（屏幕适配rpx）

> 在styles/新建flex.wxss文件 > flex.wxss文件添加到app.wxss文件中，对自定义组件样式没有效果 > 解决方法：将flex.wxss文件

╰+攻爆jí腚メ/ 2023年02月18日 12:56/ 0 赞/ 29 阅读

相关 Android适配（屏幕适配、国际化适配）

首先来说一下Android的屏幕适配：　　关于Android屏幕的一些基本概念知识，自行充电。。在此只介绍实际开发过程中的使用　　1、说到Android的屏幕适配，

男娘i/ 2022年08月06日 09:16/ 0 赞/ 437 阅读

相关 Android 屏幕适配

一、适配方式之dp 名词解释分辨率：480\800，1280\720。表示物理屏幕区域内像素点的总和。(切记：跟屏幕适配没有任何关系) 因为我们既可以把1280\7

小灰灰/ 2022年07月14日 23:53/ 0 赞/ 403 阅读

相关小程序中使用rpx单位,布局适配方案（rpx、px、vw、vh）

1:小程序中使用rpx单位 rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为

秒速五厘米/ 2022年04月16日 01:29/ 0 赞/ 2310 阅读

相关 android屏幕适配

前提 1. 什么是dpi、dp、sp、xp… (1) android中的dp在渲染前会将dp转为px，计算公式： px = density dp;

妖狐艹你老母/ 2022年03月20日 11:18/ 0 赞/ 502 阅读

相关 H5屏幕适配小总结

两个门派根据屏幕宽度设置 rem > 计算方式： > rem 根据屏幕宽度计算：屏幕宽度越大，元素的尺寸越大。可以把网页想象成一张等比缩放的图片，当你屏幕

爱被打了一巴掌/ 2022年02月23日 02:42/ 0 赞/ 338 阅读

相关 android 屏幕适配

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 曾一度为android适配感到头疼，碎片化严重不说，android中特有的尺寸概念UI设

﹏ヽ暗。殇╰゛Y/ 2022年01月15日 13:07/ 0 赞/ 476 阅读