使用響應式佈局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/consumer/cn/forum/topic/0204423007060260633?fid=18

原作者: Mayism