nuxt.js服务端渲染使用flexible.js和postcss-px2rem实现移动端自适应—淘宝弹性布局方案(750px设计稿)

2023-11-05

在用vue做服务端渲染的时候需要对移动端做适配所以要用到postcss-2rem插件, 

第一步:

首先下载flexible.js
可加载阿里的cdn文件  http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,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.naviga
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nuxt.js服务端渲染使用flexible.js和postcss-px2rem实现移动端自适应—淘宝弹性布局方案(750px设计稿) 的相关文章

  • Nuxt.js 视图

    视图 默认模板 定制化默认的 html 模板 xff0c 只需要在应用根目录下创建一个 app html 的文件 默认模板 xff1a span class token doctype span class token punctuatio
  • Nuxt.js整合axios

    整合 axios 默认整合 在构建项目时 xff0c 如果选择axios组件 xff0c nuxt js将自动与axios进行整合 手动整合 步骤1 xff1a package json有axios的版本 34 dependencies 3
  • 个人总结 - JS逆向解析

    目前加密的方式总结有下面几点 xff1a 对称加密 xff08 加密解密密钥相同 xff09 xff1a DES DES3 AES 非对称加密 xff08 分公钥私钥 xff09 xff1a RSA 信息摘要算法 签名算法 xff1a MD
  • nuxt nuxtServerInit asyncData 不能await 或者await报错

    因为一般是async nuxtServerI async asyncData await fangfa xff08 xff09 await的上一层一定要是async 不然会报错
  • nuxt asyncData extendRoutes nuxtServerInit

    材料来源 realworld 开源项目 asyncData 仅支持服务端 xff0c 页面初始化 xff0c 组件加载之前 xff0c 不能this调用 案例 官方 nuxt config js module span class toke
  • Fast-lio个人总结

    Lidar第一帧作为基坐标 1 lidar原始数据预处理默认不提取特征 xff0c 对原始数据间隔式 xff08 间隔3个点 xff09 降采样提取 2 imu初始化 惯性解算 误差分析 状态 协方差预测 3 Lidar与imu时间状态对齐
  • nuxt踩坑集

    目录结构 assets 资源文件 用于组织未编译的静态资源如 LESS SASS或 JavaScript components 组件 layouts page 模板页面 xff0c 默认为 default vue可以在这个目录下创建全局页面
  • QT 信号和槽的使用笔记

    目录 信号和槽介绍 回调机制 信号槽机制 信号 槽 信号槽和直接调用效率问题 信号和槽的使用对比 QT5 写法 QT4 写法 总结 信号和槽介绍 信号与插槽机制 提供对象间的通信机制 可以取代原始的回调和消息映射机制 信号与槽是迅速的 类型
  • npx下载构建nuxt3开发模板失败的解决方案

    在搭建nuxt3项目开发的时候 安装nuxt3开发模板的时候 使用命令 npx nuxi init my app 会出出现一下错误 This is related to npm not being able to find a file 发
  • Maven一定要会的这几个知识!

    一 Maven概念 Maven是一个项目管理和整合工具 Maven为开发者提供了一套完整的构建生命周期框架 开发团队几乎不用花多少时间就能够自动完成工程的基础构建配置 因为Maven使用了一个标准的目录结构和一个默认的构建生命周期 若有多个
  • Redis初级命令

    一 常用key命令 查看所有key keys 查看key的类型 type key 返回状态1 0 True False 当传入多个key时返回or的结果 即只要有一个存在就返回True exists key key 将key从当前db移动到
  • 解决合并单元格筛选时只出现首行的小技巧

    前言 Excel小窍门 让办公更便捷 情景 合并单元格后 单一筛选时只会显示对应的第一行数据 原因 Excel筛选单元格时 遇到不连续区域 即中间有空白单元格 会识别不到后续内容 合并单元格后 除首行外 其余行的值会被自动清空 从而导致在筛
  • cin,cout和scanf,printf速度差距

    这道题的数据量大概在1e5左右 第1 2行为C C 输入输出加速后cin cout的耗费时间 第3行为不加速的 cin cout的时间 第4行为scanf printf的时间
  • nuxt-link点击无反应

    背景 比如以下2个地址 描述 路由 页面 用户列表页面 user pages user user vue 用户详情页面 user idxx pages user id vue 当我们停留在用户详情页面时 想要回退到用户列表页面页 在用户详情
  • linux入门学习(3权限管理)

    权限管理 一 文件或目录的权限查看 1 文件权限的查看 两种查看文件详细信息的方法 ls l file 查看file文件的详细信息 如果是目录 则是查看该目录下的所有子文件的详细信息 ls ld dir 查看dir目录的详细信息 2 文件权
  • react route和Switch的区别 +嵌套路由

    Router 指定路由规则 Router默认也是模糊匹配 Router的path可以不写 如果不写 表示该组件一定匹配 Switch 选择 开关 Switch中只有一个组件能匹配 只会显示第一个匹配的组件 exact 表示精确匹配
  • vue、nuxt的mavon-editor富文本的使用及添加代码块高亮样式、代码块行数、一键复制代码功能

    为啥断更了这么久 就是因为mavon editor富文本框的样式 nuxt项目的seo nuxt项目的优化 nuxt首屏渲染等等等的问题导致这么久没有发文章了 这篇文章先讲vue项目及nuxt项目中使用mavon editor并改变代码块的
  • 在Nuxt应用程序中关闭webpack-hot-middleware客户端覆盖

    有时候 因为代码的语法错误 nuxt界面会弹出 但是 有时候因为缓等原因 即使修复了语法错误 这个提示错误的界面仍然存在 那么 出现这种情况 怎么禁止出这个界面弹出 该如何关闭它呢 在nuxt config js当中配置 overlay f
  • 系统CPU飙高和频繁GC,我要怎么排查

    1 Full GC次数过多 相对来说 这种情况是最容易出现的 尤其是新功能上线时 对于Full GC较多的情况 其主要有如下两个特征 线上多个线程的CPU都超过了100 通过jstack命令可以看到这些线程主要是垃圾回收线程 通过jstat
  • 如何解决出现Unknown at rule @applyscss(unknownAtRules)警告?

    在nuxt框架当中使用tailwindcss出现 apply下面出现警告 怎么取消这个警告呢 安装 Stylelint 首先 我们需要安装Stylelint本身和一个包含合理标准配置的包 npm install save dev style

随机推荐

  • MaskRcnn(二)实例分割的图像与标签同时进行增强

    实例分割数据增强 一 增强原因 1 防止过拟合 1 1 过拟合的定义 1 2 过拟合出现的原因 1 3 解决方法 2 增强结果模型的鲁棒性和泛化能力 2 1 鲁棒性 2 2 泛化性 3 提高识别精度 二 常用数据增强方法 1 平移 2 缩放
  • Pytorch史上最全torch全版本离线文件下载地址大全(9月最新)

    以下为pytorch官网的全版本torch文件离线下载地址 torch全版本whl文件离线下载大全https download pytorch org whl torch 其中的文件版本信息如下所示 部分版本信息 根据需要仔细寻找进行下载
  • 【计算机网络】实验五 UDP

    Objective To look at the details of UDP User Datagram Protocol UDP is a transport protocol used throughout the Internet
  • VMware14创建虚拟机(centos7)

    新建虚拟机的前提是需要准备好虚拟机的镜像 我这里已经准备好的了 打开VMware 新建虚拟机 然后 选择自定义 也可以选择典型安装 下一步 下一步 下一步 下一步 下一步 下一步 在这里介绍一下创建虚拟机网络连接的几种网络类型及对应的功能
  • 李宏毅pm2.5作业【转载】

    李宏毅机器学习PM2 5作业 使用pyCharm2022 2 1版本 python10 0 python也不会 计算机也不会 啥都不会 只带了个脑子考了计算机研究生 研究生选了人工智能方向 看来注定是漫长的学习之旅 PM2 5作业 我是一个
  • 世上最全NVDIA GPU参数列表: V100, A100, A800,H100,3090,4090, A40, A30等性能参数

    1 GeForce RTX 4090 GeForce RTX 4090 GPU 引擎规格 NVIDIA CUDA 核心数量 16384 加速频率 GHz 2 52 基础频率 GHz 2 23 显存规格 标准显存配置 24 GB GDDR6X
  • GET请求传参对象的list

    之前试过get请求传参是数组 但是试的都是基本类型 现在需求要是自定义的对象 怕写的不对 就提前自测了一下 调用方代码 Resource private TestClient testClient Test public void apiT
  • B站教学资源爬虫

    B站教学资源爬虫 最近遇到了点麻烦事 各种学习网站的不维护或者转移路线 于是将目标站点定位到了b站的学习资源 所用语言和相关模块 python3 6 requests PIL 目前网站特点分析 b站是一个具有大量资源数据的网站 但是如何将目
  • 14、OSPF学习心得2

    1 OSPF的报文 1 Hell报文 作用 1 建立和发现邻居 2 维护OSPF的邻居关系 2 DBD报文 用于描述LSDB的摘要信息 3 LSR报文 用于向对方请求所需的具体的LSA信息 4 LSUpdate 用于向对方发送具体的LSA
  • 在Linux上搭建JAVAEE的开发环境

    1 安装JDK 1 下载安装包 jdk 8u121 linux x64 tar gz 2 把JDK安装包上传到Linux系统中的 opt 目录下 通过xftp软件连接上Linux 然后双击要上传的安装包即可上传 3 解压JDK安装包 命令
  • 逻辑漏洞归纳总结

    Web安全渗透方向 三大核心 输入输出 登录体系 权限认证 典型的web漏洞 注入 跨站 上传 代码执行等属于输入输出这个层级 这也是OWASP早期比较侧重的 近年来 像越权漏洞 逻辑绕过 接口安全等逐渐增多 这些属于登录体系和权限认证这个
  • LaWGPT基于中文法律知识的大语言模型_初步安装

    准备代码 创建环境 下载代码 git clone git github com pengxiao song LaWGPT git cd LaWGPT 创建环境 conda create n lawgpt python 3 10 y cond
  • 【高效办公】程序员专用云笔记推荐

    一 参考资料 推荐几款好用的云笔记软件 云 社区 腾讯云 Markdown基本语法 简书 Markdown菜鸟教程
  • webpack-serve 的使用

    webpack serve 官方已经不维护了 还请继续食用webpack dev server 基本情况 仓库地址 配合webpack4食用最佳 在webpack3及以前的版本会有帮助信息提示 因为热加载使用的是WebSockets 所以在
  • 基于Arduino的循迹小车搭建

    材料准备 我做的是双层的循迹小车 这个网上有套件可以直接购买 到了之后组装是比较简单的 如果有不会组装的去bilbil上找一下教程也是很方便的 https www bilibili com video BV1Pe4y197DN spm id
  • 工作流Activiti7整合SpringBoot使用

    前言 一个软件系统中具有工作流的功能 我们把它称为工作流系统 一个系统中工作流的功能是什么 就是对系统的业务流程进行自动化管理 所以工作流是建立在业务流程的基础上 所以一个软件的系统核心根本上还是系统的业务流程 工作流只是协助进行业务流程管
  • 8086的写总线周期

    http www2 zzu edu cn qwfw wjylcai list asp id 127 写总线周期用来完成对存储器或I O端口的一次写操作 1 T1状态 总线周期的第一个时钟周期主要用于输出存储器地址或I O地址 如果M IO
  • android 右边充满 左边自适应,RelativeLayout中的格局,自适应宽度布局

    RelativeLayout中的布局 自适应宽度布局 该图片中为android布局 总布局为 RelativeLayout AtLeft 为居左 android layout height wrap content android layo
  • mf253s移动版变全网通_中国电信发布5G全网通终端需求白皮书v2.0

    2019 11 07 10 56 2019年10月31日 中国5G正式商用 标志着5G发展已进入快车道 整个社会各行各业对5G热情高涨 业界纷纷增加5G投入 5G终端的发展进程必将加快 市场空间巨大 潜力无限 为更好地引导产业链 推动5G加
  • nuxt.js服务端渲染使用flexible.js和postcss-px2rem实现移动端自适应—淘宝弹性布局方案(750px设计稿)

    在用vue做服务端渲染的时候需要对移动端做适配所以要用到postcss 2rem插件 第一步 首先下载flexible js 可加载阿里的cdn文件 http g tbcdn cn mtb lib flexible 0 3 4 flexib