移动端

微信小程序自定义头部导航栏 navigationStyle

使用方法；Demo下载文章底部一、公共参数设置 app.js

//获取当前设备状态栏高度
App({
    onLaunch: function() {
        wx.getSystemInfo({
            success: res => {
                this.statusBarHeight = res.statusBarHeight
            }
        })
    },
    statusBarHeight: 0,
    globalData: {
        userInfo: null
    }
})

//获取当前设备状态栏高度

App({

onLaunch: function() {

wx.getSystemInfo({

success: res => {

this.statusBarHeight = res.statusBarHeight

}

})

statusBarHeight: 0,

globalData: {

userInfo: null

}

})

app.json [crayon-6…

前端 2019年7月28日 1.15K

开发移动端项目如何rem适配

window.addEventListener('resize', setHtmlFontSize)
setHtmlFontSize();
function setHtmlFontSize() {
    // 根据屏幕的宽度来改变根元素的字体大小的值
    // 当前屏幕 / 标准的375屏幕 求得你当前屏幕是标准屏幕的多少倍  * 标准屏幕根元素的字体大小
    // 当前屏幕的宽度 / 375 * 100
    // 假如当前750/375 = 2 * 100 == 200px
    // 1. 当前屏幕的宽度
    var windowWidth = document.documentElement.offsetWidth;
    // 限制最大屏幕 和最小屏幕
    if (windowWidth > 640) {
        windowWidth = 640;
    } else if (windowWidth < 320) {
        windowWidth = 320;
    }
    //2. 标准屏幕的宽度
    var StandardWidth = 375;
    // 标准屏幕的html的字体大小
    var StandardHtmlFontSize = 100;
    //3. 当前屏幕需要设置的根元素的字体大小
    //要设置的根元素字体大小 = 当前屏幕宽度 / 标准屏幕宽度 * 标准屏幕的html的字体大小
    var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize;
    //4. 把当前计算的html 字体大小设置到页面的html元素上就可以
    document.querySelector('html').style.fontSize = htmlFontSize + 'px';
}

window.addEventListener('resize', setHtmlFontSize)

setHtmlFontSize();

function setHtmlFontSize() {

// 根据屏幕的宽度来改变根元素的字体大小的值

// 当前屏幕 / 标准的375屏幕求得你当前屏幕是标准屏幕的多少倍 * 标准屏幕根元素的字体大小

// 当前屏幕的宽度 / 375 * 100

// 假如当前750/375 = 2 * 100 == 200px

// 1. 当前屏幕的宽度

var windowWidth = document.documentElement.offsetWidth;

// 限制最大屏幕和最小屏幕

if (windowWidth > 640) {

windowWidth = 640;

} else if (windowWidth < 320) {

windowWidth = 320;

}

//2. 标准屏幕的宽度

var StandardWidth = 375;

// 标准屏幕的html的字体大小

var StandardHtmlFontSize = 100;

//3. 当前屏幕需要设置的根元素的字体大小

//要设置的根元素字体大小 = 当前屏幕宽度 / 标准屏幕宽度 * 标准屏幕的html的字体大小

var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize;

//4. 把当前计算的html 字体大小设置到页面的html元素上就可以

document.querySelector('html').style.fontSize = htmlFontSize + 'px';

}

将以上代码引入项目的每个html文件。例如我用MUI框架开发项目，项目文件结构搭建好，引入相应的M…

笔记 2019年2月15日 670

移动端

微信小程序 自定义头部导航栏 navigationStyle

开发移动端项目如何rem适配

联系我们

微信小程序自定义头部导航栏 navigationStyle