zoukankan      html  css  js  c++  java
  • 移动端 rem 适配方案

    不用担心,项目已经配置好了 rem 适配, 下面仅做介绍:

    Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:

    PostCSS 配置

    下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

    // https://github.com/michael-ciniawsky/postcss-load-config
    module.exports = {
        plugins: {
            autoprefixer: {
                overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
            },
            'postcss-pxtorem': {
                rootValue: 37.5,
                propList: ['*']
            }
        }
    }

    更多详细信息: vant

    新手必看,老鸟跳过

    很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以需要的尺寸了。下面就大搞普及一下 rem。

    我们知道 1rem 等于html 根元素设定的 font-size 的 px 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下看到 (1rem 等于 37.5px):

    <html data-dpr="1" style="font-size: 37.5px;"></html>

    切换不同的机型,根元素可能会有不同的font-size。当你写 css px 样式时,会被程序换算成 rem 达到适配。

    因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

    举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。

    • rootValue: 70 , 样式  750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
    • rootValue: 37.5 的时候,样式  375px;height: 667px; 图片会撑满 iPhone6 屏幕。

    也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

    当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

    <img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
    
    <style>
        /* rootValue: 75 */
        .image {
             750px;
            height: 1334px;
        }
        /* rootValue: 37.5 */
        .image {
             375px;
            height: 667px;
        }
    </style>
     
  • 相关阅读:
    从B树、B+树、B*树谈到R 树
    平衡二叉树、B树、B+树、B*树
    数据库事务和四种隔离级别
    python 安装surprise库解决 c++tools错误问题
    python的sorted函数
    爬虫出现gbk错误
    Windows下Python安装numpy+mkl,Scipy和statsmodels
    Flask--框架及路由
    flask常见面试题
    RE正则表达式
  • 原文地址:https://www.cnblogs.com/xzqyun/p/15771289.html
Copyright © 2011-2022 走看看