zoukankan      html  css  js  c++  java
  • vscode中,移动端rem的使用

    一、安装px2rem插件

    浏览器默认1rem = 16px,在这里可以修改默认值为100,以Phone 6/7/8 尺寸作为参照,原因在步骤二中。

         

    二、在根元素中设置font-size

    参照iPhone 6/7/8 尺寸,宽度为375px,给出计算公式:calc(100vw/3.75)。

    因为 1vw = 1/100*视口宽度,所以:视口宽度 = 100 vw;

    使用iPhone 6/7/8时,视图宽度为375px,即100 vw = 375px; 带入calc计算公式中,得 font-size:100px,即1rem = 100px。

    使用iPhone 6/7/8 Plus时,视图宽度为414px,即100vw = 414px;带入calc计算公式中,得 fon-size:110.4px,即1rem = 110.4px。

    这就实现了根元素的字体大小随着不同移动设备尺寸的变化而改变。

    UI设计图一般以iPhone 6/7/8为参照,宽度为375px,假如某设计页面中一个div的宽度为48px,因为在 px2rem工具中,我们设置了1rem=100px,所以该div的宽度用rem表示为0.48rem。

    若放在iPhone 6/7/8 Plus中,由于视口宽度 变大了,根据公式得出1rem的值为110.4px,所以该div宽度为0.48rem*110.4px = 52.992px。

    实现了某div元素的宽度随着移动设备宽度的变大而变大。

     

     三、根据设计图添加每个盒子宽高,并用rem 单位表示(参照iPhone 6/7/8的设计搞)

  • 相关阅读:
    Abp Swagger API中文说明配置方法
    ABP框架中使用MySQL数据库
    windows + jenkins + .net core + iis自动化部署新手入门
    在图片上画矩形框
    base64转换成np、opencv、PIL
    RankSVM
    tf.placeholde函数解释与用法
    slim.arg_scope()的使用
    SSD网络结构
    tensorflow学习笔记
  • 原文地址:https://www.cnblogs.com/heisetianshi/p/14955875.html
Copyright © 2011-2022 走看看