nuxt 同时适配pc端和移动端实现(一套代码)

您所在的位置：网站首页 › cssrem转换工具 › nuxt 同时适配pc端和移动端实现(一套代码)

nuxt 同时适配pc端和移动端实现(一套代码)

2023-03-23 03:30| 来源: 网络整理| 查看: 265

需求：在原有的pc端项目源码基础上迭代开发移动端适配

框架：nuxt,vuetify

一、实现思路

1. 引入 flexible

// 在config文件中 head:{ script:[ { src:"/js/flexible.js", type: 'text/javascript', charset: 'utf-8'//移动端适配 } ] }

flexible.js兼容文件

(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.querySelector('meta[name="flexible"]') var dpr = 0 var scale = 0 var tid var flexible = lib.flexible || (lib.flexible = {}) if (metaEl) { console.warn('将根据已有的meta标签来设置缩放比例') var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/) if (match) { scale = parseFloat(match[1]) dpr = parseInt(1 / scale) } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content') if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) if (initialDpr) { dpr = parseFloat(initialDpr[1]) scale = parseFloat((1 / dpr).toFixed(2)) } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]) scale = parseFloat((1 / dpr).toFixed(2)) } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi) var isIPhone = win.navigator.appVersion.match(/iphone/gi) var devicePixelRatio = win.devicePixelRatio if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2 } else { dpr = 1 } } else { // 其他设备下，仍旧使用1倍的方案 dpr = 1 } scale = 1 / dpr } docEl.setAttribute('data-dpr', dpr) if (!metaEl) { metaEl = doc.createElement('meta') metaEl.setAttribute('name', 'viewport') metaEl.setAttribute( 'content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no' ) if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl) } else { var wrap = doc.createElement('div') wrap.appendChild(metaEl) doc.write(wrap.innerHTML) } } function refreshRem() { var width = docEl.getBoundingClientRect().width if (width / dpr > 540) { width = 540 * dpr } var rem = width / 10 docEl.style.fontSize = rem + 'px' flexible.rem = win.rem = rem } win.addEventListener( 'resize', function() { clearTimeout(tid) tid = setTimeout(refreshRem, 300) }, false ) win.addEventListener( 'pageshow', function(e) { if (e.persisted) { clearTimeout(tid) tid = setTimeout(refreshRem, 300) } }, false ) if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px' } else { doc.addEventListener( 'DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px' }, false ) } refreshRem() flexible.dpr = win.dpr = dpr flexible.refreshRem = refreshRem flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem if (typeof d === 'string' && d.match(/rem$/)) { val += 'px' } return val } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem if (typeof d === 'string' && d.match(/px$/)) { val += 'rem' } return val } })(window, window['lib'] || (window['lib'] = {}))

提一嘴：添加引入flexible文件后，页面根元素的fontsize发生变化，但是由于该项目采用的vuetify ui框架底层样式部分以rem为单位，这就直接导致部分组件样式炸裂（据说element不会出现这种情况），字体变得非常大，如图：

我的弹窗提示组件，分页器，标题都炸了。为了尽快交差，我临时想到的解决方案就是改sass表了，打开控制台，看看样式表哪个是按rem为单位，然后按悬浮窗口原有的值，去设置pc端（大屏）的以px为单位的值

2. 编写 scss，加上函数r()

$baseWidthRate: 37.5; //如设计稿是750px的话，就是75 // px转换为rem @function r($num) { @return calc($num / $baseWidthRate) + rem; }

（1）关于sass全局变量和自定义方法的应用点击查看详情

3. 页面中使用

@media only screen and (max-width: 1023px) { /* 使用了媒体查询 @media max-width: 1023px 属于小屏 */ /* 小屏是使用了 rem 作为单位, 根据 html 标签 font-size 计算元素的大小 */ /* 借助 sass 的函数功能 */ .class类名 { font-size: r(12); } } @media only screen and (min-width: 1024px) { /* 使用了媒体查询 @media 1024px 属于大屏单位为px*/ .class类名 { font-size: 12px; } }

【本文地址】

nuxt 同时适配pc端和移动端实现(一套代码)

nuxt 同时适配pc端和移动端实现(一套代码)

今日新闻

推荐新闻