amfe手机淘宝前端团队 https://github.com/amfe

最新推荐文章于 2024-11-20 16:15:38 发布

转载最新推荐文章于 2024-11-20 16:15:38 发布 · 4.2k 阅读

收录于

淘宝专栏收录该内容

7 篇文章

订阅专栏

本文概述了多个前端库及布局方案，包括lib-flexible、lib-transition等，提供了更新日期、语言类型、关注人数等关键信息。

Explore
Features
Enterprise
Pricing

amfe

Repositories People 3

JavaScript 1,399 451

lib-flexible

可伸缩布局方案

Updated 13 days ago

JavaScript 283 67

ml

无线前端库

Updated 19 days ago

2,965 462

article

Updated on 26 Nov 2015

JavaScript 65 9

or.htmlone.gulp

htmlone combo ; gulp组件，功能和 grunt 版本的 htmlone 一致

Updated on 30 Jun 2015

0 0

lib-transition

Updated on 4 Jun 2015

JavaScript 1 2

lib-transform

Updated on 4 Jun 2015

HTML 34 11

lib-env

Updated on 4 Jun 2015

JavaScript 0 0

ctrl-loading

Updated on 4 Jun 2015

JavaScript 0 1

ctrl-pageview

Updated on 4 Jun 2015

JavaScript 10 3

ctrl-scrollview

Updated on 4 Jun 2015

JavaScript 1 0

ctrl-tabheader

Updated on 4 Jun 2015

JavaScript 0 0

ctrl-tabpanel

Updated on 4 Jun 2015

JavaScript 2 1

ctrl-waterfall

Updated on 4 Jun 2015

JavaScript 4 1

lib-motion

Updated on 4 Jun 2015

JavaScript 3 3

lib-gesture

Updated on 4 Jun 2015

HTML 23 6

lib-scroll

Updated on 4 Jun 2015

JavaScript 1 1

lib-promise

Updated on 4 Jun 2015

HTML 0 0

lib-cubicbezier

Updated on 4 Jun 2015

JavaScript 4 3

lib-navigation

全局导航

Updated on 4 Jun 2015

JavaScript 3 5

ift

forked from qiuscut/if-sync

Updated on 10 Dec 2013

3 People

Jinjiang勾三股四

terrykingcha金擘

wintercnShaofei Cheng

Status
API
Training
Shop
Blog
About
Pricing

© 2016 GitHub, Inc.
Terms
Privacy
Security
Contact
Help

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

panyuwu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

你的移动端Vue项目真的‘完美’适配了吗？聊聊amfe-flexible + postcss-pxtorem方案里的那些‘坑’和最佳实践

最新发布

weixin_42526353的博客

04-18

215

本文深入探讨了移动端Vue项目中amfe-flexible + postcss-pxtorem适配方案的原理、常见问题及最佳实践。通过分析动态viewport设置、rem转换机制，以及解决图片模糊、第三方UI库样式错乱等典型问题，帮助开发者避免常见陷阱，实现真正的完美适配。

参与评论您还未登录，请先登录后发表或查看评论

vue项目的移动端适配方案

weixin_40758662的博客

07-19

2442

可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可。1、在安装好的依赖文件夹node_modules中，找到amfe-flexible/index.js文件，将文件的内容复制出来。2、在src/assets/js文件中，新建amfe-flexible.js文件，粘贴步骤1的内容。③postcss.config.js ，在根目录下新建改文件夹（亲测该方法，可用）2、在main.js中引用。

vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案

铁锤妹妹的博客

03-18

8310

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

6209

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

vue移动端适配解决方案

qq_46177396的博客

02-15

1871

手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。当然，要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的r

vue3-vite使用lib-flexible（amfe-flexible）总结/vue3 px转rem工具方法

程小博衍的博客

03-08

4284

vue3-vite使用lib-flexible（amfe-flexible）

移动端rem适配布局：Vue+amfe-flexible+postcss-pxtorem

weixin_43932309的博客

06-17

3060

移动端rem适配布局：Vue+amfe-flexible+postcss-pxtorem 一文技能全get，顺便填坑...

vue 学习笔记 -- 响应式布局移动端适配

xiaohuihui_qian的博客

10-19

538

它会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。实际重启时候遇到如下报错，原因：cli版本过高问题，卸载cli安装低版本cli重新操作一遍即可。安装 amfe-flexible ,并在main.js 主入口文件引入 amfe-flexible。amfe-flexible 插件。

移动端适配方案 flexible.js

05-15

500

前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种相对来说让人比较满意的解决方案，尽可能地让这种“意外”减到最少。没错今天的主角就是它“flexible.js” 。 flexible.js 之旅 flexible.js 的作用就是让你在不同的终...

使用amfe-flexible以及px2rem-loader解决VUE移动端适配

jayccx的专栏

05-25

912

由于 layout viewport的宽度是远大于浏览器宽度的，因此我们需要一个新的viewport来代表浏览器的可视区域宽度，这个视图则被成为visual viewport我们可以使用window.innerWidth来获取。由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。vant组件库的设计稿是按照375px来开发的。至此，我们的viewport的适配就做好了，只需要按照设计稿的比例进行开发就可以了。

vue 实现响应式布局，移动pc端通用：amfe-flexible和postcss-pxtorem结合使用

yawhom的博客

03-03

2830

在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结合）建议收藏

热门推荐

been_ss的博客

10-13

2万+

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem（适用于 Webpack）

前端技术

06-09

1万+

项目对应的webpack以谷歌为例，F12 打开“开发者工具”，页面会出现如上分辨率选择最下一行的 “修改…”打开“修改…”对话框，添加自定义设备… ，注意选择Desktop，最后保存就能切换了。

vue3+vite+typescript 使用amfe-flexible.js记录

qq_39098031的博客

11-20

435

3.在vite.config.js配置。2.在main.ts引入文件。

vue实现pc端、移动端、大屏适配

yeah_bin的博客

09-28

3563

postcss-pxtorem:将px转换为px(使得再写css时，可以依据设计图直接使用px作为单位，编译时插件自动将单位由px转为rem)

移动端适配方案 amfe-flexible & postcss-pxtorem

m0_51932050的博客

08-02

1106

移动端适配方案 amfe-flexible & postcss-pxtorem

vue3-vite使用amfe-flexible

路虽远，行则必至！

07-24

1160

在根目录，和package.json同级，创建一个名为postcss.config.js的文件。在index.html头部加入手机端自适应meta。

vue使用lib-flexible实现屏幕适配

weixin_44582077的博客

08-01

8889

前言：有时候我们要用到屏幕灵活自适应，就不能将页面高度写死；所以怎么办呢？需要引入lib-flexible使用。引入方法及配置如下所示：注：此方法是针对vue2.X版本配置的。 1.npm install lib-flexible -S //安装lib-flexible 2.import 'lib-flexible //在vue项目里面的src目录下的main.js文件全局引用' 3.将vue项目下的index.html文件里面的一行代码注释掉，否则lib-flexible可能不会起作用： 4.在no

解决vue移动端适配问题

weixin_43295397的博客

09-29

3620

解决vue移动端适配问题 1.首先把安装amfe-flexible，这里使用npm install npm install -S amfe-flexible 2.在入口文件中引入 import 'amfe-flexible/index.js' 3.在根目录的index.html 的头部加入手机端适配的meta代码 <meta name="viewport" content="width...

vue移动端rem适配--附带引入第三方库解决方案

qiuzhf

02-25

3301

一、先上解决方案：移动端适配我采用淘宝的一套rem解决方案源码： https://github.com/amfe/lib-flexible 1、安装 npm i -S amfe-flexible 2、引入meta标签 &amp;amp;amp;amp;lt;meta name=&amp;amp;amp;quot;viewport&amp;amp;amp;quot; content=&amp;amp;amp;quot;width=device