移动端和PC端响应式布局
只需要在需要响应式布局的页面添加下面的方法即可,在react或vue的脚手架中只需要在index.html文件中添加改方法就可以实现全局响应式布局了(因为react和vue都是单页面)function remSize() {// 获取移动设备的宽度var deviceWidth = document.documentElement.clientWidth || window.innerWidth/
·
只需要在需要响应式布局的页面添加下面的方法即可,在react或vue的脚手架中只需要在index.html文件中添加改方法就可以实现全局响应式布局了(因为react和vue都是单页面)
function remSize() {
// 获取移动设备的宽度
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
// 设置最大宽度 (需要限制宽度时添加)
if (deviceWidth >= 750) {
deviceWidth = 750
}
// 设置最小宽度 (需要限制宽度时添加)
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
// 在width=375px时 10px = 0.1rem 在不限制宽度时width:100%; 等同于 width:7.5rem;
document.querySelector('body').style.fontSize = 0.32 + 'rem'
}
remSize()
// 窗口发生变化时调用
window.onresize = () => {
remSize()
}
更多推荐
已为社区贡献2条内容
所有评论(0)