移动端适配基础知识

最新推荐文章于 2024-03-22 10:56:41 发布
最新推荐文章于 2024-03-22 10:56:41 发布
阅读量36 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuqudhen/article/details/132925569
版权
本文介绍了使用Yarn管理依赖并引入amfe-flexible库进行移动端布局适配的方法，重点提及了postcss-pxtorem在转换像素单位为rem的过程中的注意事项。通过main.js导入amfe-flexible并测试在不同设备尺寸下的font-size变化。
摘要由CSDN通过智能技术生成 
# yarn add amfe-flexible
npm i amfe-flexible

2、然后在 main.js 中加载执行该模块

import 'amfe-flexible'

最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。

以上是amfe-flexible

1. yarn add postcss-pxtorem -D

bug部分：postcss.config.js  名字部分不要加.(点)

2.

以上是移动端适配写法（将px转化成rem）

黑糖厚乳拿铁
关注
vue移动端适配.md
07-31
### Vue 移动端适配知识点详解 #### 一、引言 随着移动互联网的快速发展，用户越来越多地通过手机和平板等移动设备访问网站或应用。因此，如何确保基于 Vue.js 开发的应用能够良好地适应各种移动设备屏幕大小，...
移动端适配（amfe-flexible 结合postcss postcss-pxtorem）
weixin_57167969的博客
08-06 1069
1、amfe-flexible 1）下载： yarn add amfe-flexible 2）到main.js引入 import "amfe-flexible" 作用：根据网页宽度, 设置html的font-size，将1rem设为viewWidth/10 2、postcss和postcss-pxtorem 1）下载： yarn add postcss postcss-pxtorem@5.1.1 -D//我这里下载的版本为5.1.1 作用： ① postcss： 后处理css, 编译翻译css代码 ②
CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem（适用于 Webpack）
前端技术
06-09 8610
项目对应的webpack以谷歌为例，F12 打开“开发者工具”，页面会出现如上分辨率选择最下一行的 “修改…”打开“修改…”对话框，添加自定义设备… ，注意选择Desktop，最后保存就能切换了。
使用amfe-flexible以及px2rem-loader解决VUE移动端适配
jayccx的专栏
05-25 515
由于 layout viewport的宽度是远大于浏览器宽度的，因此我们需要一个新的viewport来代表浏览器的可视区域宽度，这个视图则被成为visual viewport我们可以使用window.innerWidth来获取。由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。vant组件库的设计稿是按照375px来开发的。至此，我们的viewport的适配就做好了，只需要按照设计稿的比例进行开发就可以了。
vue 实现响应式布局，移动pc端通用：amfe-flexible和postcss-pxtorem结合使用
yawhom的博客
03-03 2305
在vue.config.js添加配置postcss-pxtorem；（注意：可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置。对于需要特殊元素需要设置的字体自适应，如echarts字体，可以在utils封装一个字体自适应的方法。2.postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。在main.js引入amfe-flexible。
VUE实现移动端适配方案（amfe-flexible + postcss-pxtorem）
qq_36835683的博客
11-30 1418
步骤如下 1、先安装 amfe-flexible 和 postcss-pxtorem postcss-pxtorem官方文档https://www.npmjs.com/package/postcss-pxtoremamfe-flexible官方文档https://www.npmjs.com/package/amfe-flexible npm install amfe-flexible --save npm install postcss-pxtorem --save 2、在入口文件main.js中
移动端基础知识以及适配方法.pdf
04-16
### 移动端适配方法 1. **视口（Viewport）**： - **布局视口（layout viewport）**：移动设备浏览器的默认视口，通常较宽，这样PC端的网站也可以在手机上正常显示。 - **视觉视口（visual viewport）**：代表...
移动端 CSS 适配入门 - By PlasticTree
03-17
#### 二、移动端CSS适配基础知识 ##### 2.1 像素Pixel **定义：** 在计算机显示技术中，像素（Pixel）是构成图像的基本单元。一个像素通常由三个子像素组成，分别代表红、绿、蓝三种颜色，它们的不同组合形成了...
vuevantUIaxios移动端项目rem做适配
08-10
5. 移动端适配策略：在移动端项目中，通常采用Flexbox布局或Grid布局来实现响应式设计。项目可能运用了这些技术，确保元素在不同屏幕尺寸下都能正确排列和显示。 6. Babel：由于部分旧版浏览器不支持ES6以上的语法...
flexible.js实现移动端rem适配方案
10-15
### 基础知识 1. **物理像素**：设备上的最小显示单位，直接影响屏幕的清晰度。 2. **设备独立像素**：编程时使用的虚拟像素，不直接对应物理像素，但可以通过dpr转换。 3. **设备像素比（dpr）**：物理像素与设备...
vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案
铁锤妹妹的博客
03-18 6491
1.介绍amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2.介绍postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素（px）单元生成rem单位。 具体步骤： 1. 安装两个插件 npm install amfe-flexible --save npm install postcss-pxtorem --save 2. 在main.js导入amfe-flexible import 'a.
vue 引入amfe-flexible
weixin_47473788的博客
09-30 5550
1.amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2.postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。 3.移动端适配方案 vue实现移动端适配步骤如下： 先安装amfe-flexible和postcss-pxtorem npm install amfe-flexible --save npm install postcss-pxtorem --save 在mai
vue3.0引用vant，适配rem。最后需要在main.js中引入import ‘amfe-flexible‘
glf910705的博客
12-08 407
如果需要使用rem单位进行适配，推荐使用以下两个工具： postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 安装 $ npm install postcss postcss-pxtorem --save-dev $ npm i -S amfe-flexible PostCSS 示例配置 下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。 /...
移动端适配(amfe-flexible)
最新发布
sjkafljask的博客
03-22 354
链接：https://www.jianshu.com/p/64d6292fb607。商业转载请联系作者获得授权，非商业转载请注明出处。在项目根目录中, 新建。
vue3-vite使用lib-flexible（amfe-flexible）总结/vue3 px转rem工具方法
程小博衍的博客
03-08 3402
vue3-vite使用lib-flexible（amfe-flexible）
解决vue移动端适配问题，vue-cli3+vant-ui等第三方UI组件引入适配
weixin_33788244的博客
03-21 2101
1.首先把安装amfe-flexible，这里使用npm install npm i -S amfe-flexible 复制代码2.在入口文件main.js中引入 import 'amfe-flexible/index.js' 复制代码3.在根目录的index.html 的头部加入手机端适配的meta代码 <meta name="viewport" content="width=device...
基于NPM和webpack的HTML页面开发——amfe-flexible postcss-pxtorem页面自适应
sayUonly的博客
09-21 938
由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了NPM开发环境。amfe-flexible和postcss-pxtorem之前在Vue项目中经常使用。目的是不同大小屏幕下的页面自适应。这里我将这个方法引入到我的单个HTML页面开发中。 这个文章是我个人开发的一个良好实践，基于我之前做的一个html开发模板html-template进行拓展的。 安装 首先安装重要的插件。 amfe-flexible是用来计算根font-size。 postcss-pxtorem是将css中的px单位转换为re
vue实现移动端适配方案 （amfe-flexible和postcss-pxtorem结合）建议收藏
热门推荐
been_ss的博客
10-13 2万+
1.amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2.postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。 3.移动端适配方案 vue实现移动端适配步骤如下： 先安装amfe-flexible和postcss-pxtorem npm install amfe-flexible --save npm install postcss-pxtorem --sa
vue-vant使用postcss-pxtorem和amfe-flexible做移动端适配
weixin_53787454的博客
10-27 1162
vue-vant使用postcss-pxtorem和amfe-flexible做移动端适配
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值