nuxt.js实战之移动端rem

nuxt.js的项目由于是服务端渲染，通过js动态调整不同尺寸设备的根字体这种rem方案存在一种缺陷。由于设置字体的代码不能做服务端渲染，导致服务端返回的代码一开始没有相应的跟字体，直到与前端代码进行合并根字体改变，这就造成我们的应用初始状态会根据两种根字体改变尺寸，体验很不好。

于是采用服务端可以渲染的css解决方案。

vw + postcss-pxtorem 或者 vw + sass（自己实现px2rem），这里如果是nuxt项目推荐使用第一种方式。

nuxt.config.js中配置如下：

postcss: [require('postcss-pxtorem')({rootValue: 40,propList: ['*']}),require('autoprefixer')({browsers: ['Android >= 4.0', 'iOS >= 7']})]

根据这个rootValue使用vw设置开发屏幕下的跟字体，假设我的设计稿是750宽度，则跟字体 = 40 / 7.5vw（100vw对应750px，1vw = 7.5px）, 为 5.333333333333333vw。

转载于:https://www.cnblogs.com/chunshan-blog/p/9960607.html

nuxt.js实战之移动端rem相关推荐

nuxt.js实战asyncdata服务端渲染
Nuxt扩展了Vue的生命周期: export default {middleware () {}, //服务端,中间件validate () {}, // 服务端asyncData () {}, / ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
Nuxt.js 开发SSR(服务端渲染)Web应用
1. 初识 Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架. 与 vuepress 的关系: Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计, ...
nuxt.js之SSR服务端内存泄漏导致CPU过高的解决过程
问题最近在公司维护nuxt项目时,线上遇到了一个问题--访问网站,网站会报502或者JS.css资源报502. 去运维那一查pm2,项目node服务器的CPU达到了100%,实际上这段时间并没有人访 ...
flexible.js淘宝移动端rem自适应用法
1.设置视窗,如下两种都行 <!-- <meta name="viewport" content="width=device-width,user-scala ...
Node项目部署到阿里云服务器(ECS)，以Nuxt.js服务端渲染项目为例
1.前言最近打算业余时间搭个网站,选择的技术栈为node+mongodb+Nuxt.js(基于vue,用于创建服务端渲染 (SSR) 应用),以下不会教科书式讲解,只是提供整体思路.参考资料以及关键 ...
使用Nuxt.js搭建VUE应用的SSR（服务端渲染）
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染) Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
nuxt.js常见问题总结
最近在开发我司一项目,用的是nuxt.js开发的,nuxt版本号:2.14.8. 主要记录一下,我在这个项目中一些用到的东西吧,地址:http://www.lawlawing.com/ 感觉基本包含了 ...
NUXT 入门第一课：关于 Nuxt.js
关于 Nuxt.js 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js,一个 React 的服务端渲染应用框架.几小时后,与 Next.js 异曲同工,一个基于 ...

nuxt.js实战之移动端rem

nuxt.js实战之移动端rem相关推荐

最新文章

热门文章