关于android:使用响应式布局MediaQuery解决text组件在不同分辨率机型上文字显示不一致的问题

问题概述
text 组件，设定宽度，文字铺满对应宽度，高分辨率机型加载文字压缩，联盟存在同样问题

复现步骤
1、加载 demo

2、组件 –> 根底组件 –>text 组件

理论行为
1、低配机型加载失常 2、高分辨率机型加载文字压缩

验证
找了两台设施，其分辨率别离是 2340 1080 和 2560 1600, 别离对一下款式进行验证

<text style="width: 172px;">text-align:center</text>2340 * 1080

能够显著看到残缺贴和边缘

抓取布局失去布局宽度是 248 pixel

172 * (1080 / 750) = 247.68 四舍五入为 248

2560 * 1600

能够看到布局不下了，被换行了

抓取布局失去布局宽度是 367 pixel

172 * (1600 / 750) = 366.9 四舍五入为 367

验证后果

在 2560 * 1600 的设施上残缺布局这行文本须要 175px;

在 2340 * 1080 的设施上残缺布局这行文本须要 172px;

剖析

2560 * 1600
textsize = 64.0

2340 * 1080
textsize = 43.0

实际上是不同设施下的失效的 textsize 是不一样的，所以最终生成的布局宽度可能不是一个固定的宽度

解决
快利用提供了 MediaQuery 能力，能够用来适配不同分辨率的设施

在这里就能够应用 mediaquery 判断屏幕宽度的形式

例子
应用前

<template>    
<div>        
<text>text-align:left</text>    
</div>
</template>
 <style>    
 .text-test {width: 172px;}</style>

成果

应用后

<template>
    <div>
        <text class="text-test">text-align:left</text>
    </div>
</template>
 
<style>
    @media (width > 1080) {
        .text-test {width: 175px;}
    }
    .text-test {width: 172px;}
</style>

成果

适配计划
首先找到不同分辨率的设施，应用 ide 的 inspact 性能获取到冀望的宽度值

2560 * 1600 须要的宽度是 175px; 2340 * 1080 须要的是 172px;

应用 mediaquery 对不同设施进行辨别

这里判断一下设施宽度

@media (width > 1080) { 
       .text-test {width: 175px;}    
         }

原文链接：https://developer.huawei.com/…
原作者：Mayism