移动端和PC端响应式布局

只需要在需要响应式布局的页面添加下面的方法即可,在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()}