【前端库】淘宝适配 rem适配 lib-flexible.js 个人总结

最新推荐文章于 2024-03-12 11:59:09 发布
最新推荐文章于 2024-03-12 11:59:09 发布
阅读量1.3w 收藏 9
点赞数 2
分类专栏： 前端 文章标签： rem适配 lib-flexible.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41000111/article/details/80098182
版权

前言

上篇文章中使用 rem适配 ，现在说下大部分都在使用的rem。看完这篇文章移动端页面开发适配 rem布局原理，发现我根本就不懂（心想管他了），但是只要会使用即可，干货来了。

下载

  • 看下面图进行下载
  • 看下面图进行下载
  • 看下面图进行下载

下载教程

下载地址：https://github.com/chengjs/rem

个人使用推理

下图说明：按视口的宽度来计算的。

看真相

下图说明：再次证明有点，按设计图的总宽度除以10，就是基准值。

基准值

总结：比如设计图是640的，那么基准值就是 64，以此类推。那么我设计图是1080的，在设计图中，有一个按钮是120px，转换的话就是，120/基准值，等于就是rem值（120/108 = 1.1111111111111112rem） 。

实际开发

直接看案例：等待更新…..

搬砖老程
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 3、在 index.html 编辑
基于vue-cli配置lib-flexible + rem实现移动端自适应
08-28
主要介绍了基于vue-cli配置lib-flexible + rem实现移动端自适应,需要的朋友可以参考下
自适应布局之淘宝无限适配+rem
最新发布
weixin_45128657的博客
03-12 386
所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。rem是css中的单位，而且是相对单位，rem单位是基于html中根元素的字体大小。2.vscode中打开文件 ==>首选项 ==>设置。1.下载插件cssrem。
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
01-19
淘宝弹性布局lib-flexible lib-flexible并不单独使用，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem，在项目中还是按照设计稿写上对应的固定像素（px）就行。 移动端适配的具体步骤 第一步：安装插件 lib-flexible npm i lib-flexible --save-dev 第二步：安装px2rem loader npm install px2rem-loader --save-dev 第三步：在main.js中引入lib-flexible import 'lib-flexible/flexible' 第四步：在bu
手淘移动端适配方案——lib-flexible.js
09-18
移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战，总结了一套移动端适配的方案——flexible方案。
vue项目中使用lib-flexible解决移动端适配的问题解决
12-09
第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible $ npm install lib-flexible --save 二、在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。 lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此
flexible.js 适配移动端详解
weixin_71280597的博客
02-18 756
flexible.js 适配移动端详解
移动端适配+flexible.js+rem适配
weixin_47284756的博客
03-03 9939
移动端适配 前沿： 移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。 基础概念 俗称看看就行 这个才是正文！！！！ 1.width=device-width（设备宽度）或者 value 设置Html宽度（一般与设备的宽度一致） 由于每个设备的宽度不同所以在刚进入到页面一开始的时候就把最大宽度设置为设备宽度 <meta name="viewport" content
使用Flexible实现手淘H5页面的终端适配
weixin_30337157的博客
11-23 1188
使用Flexible实现手淘H5页面的终端适配 曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？ 那么趁此Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家...
移动端适配（淘宝适配）
热爱IT技术，原创不易，有疑问可私信
07-03 373
使用淘宝适配来实现页面响应式的移动端布局
vue2中做移动端适配（淘宝方案）
qq_48378883的博客
06-19 374
postcss: { // 样式代码处理。plugins: [ // 插件配置。require("postcss-px2rem")({ // 引入单位转换插件。exclude:/node_modules/i // 不包含文件。css: { // 预先处理css。
淘宝适配移动端js(rem)
11-13
淘宝适配移动端js(rem)
详解vue.js移动端配置flexible.js及注意事项
01-21
最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。 主体 flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-...
移动端适配flexible.js
Baby_加油_的博客
11-19 1744
1、什么是flexible.js 是一个终端设备适配的解决方案。 是一个用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小，样式间距都使用rem作为单位，不同屏幕大小适配不同的样式。 2、flexible.js 做的三件事 动态改写标签 给元素添加data-dpr属性，并且动态改写data-dpr的值 给元素添加font-size属性，并且动态改写font-size的值 如果没有设置viewport，会动态生成 <meta name="viewport" content="
vue前端项目基于淘宝lib-flexible做手机端适配
u012525389的博客
08-09 469
项目中引入lib-flexible插件 1、通过npm命令导入 1）在命令窗口进入项目目录执行：npm install lib-flexible --save 2）在项目的main.js中引入lib-flexible：import 'lib-flexible' 2、修改meta属性 <meta name="viewport" content="width=device-w...
淘宝适配js
qq_29431557的博客
03-17 367
&lt;script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"&gt;&lt;/script&gt;
vue 移动端适配flexible.js使用方法
weixin_47151361的博客
05-09 5408
原理： flexible.js 适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size,从而达到每个元素宽高自动变化，适配不同屏幕 操作步骤： 1.安装lib-flexible.js npm install lib-flexible --save 2.在项目入口文件main.js 中引入lib-flexible import 'lib-flexible/flexible' 解释： lib-flexible会自动在html的head中添加一个meta name=
【Vue中使用Echarts】响应式布局flexible.js+rem适配方案
一个非常Cool的人
01-05 2560
在进行网页设计的时候由于屏幕大小并不是一定的，所以需要考虑到许多尺寸方面的因素，像素、em、rem三种单位均是常会用到的单位，对他们有一定理解后可以使我们设计出来的网页组件与组件之间契合度更高，展示出来更好看。本篇博客会使用flexible+rem实现vue项目中的响应式布局。
自适应布局之淘宝无限适配+rem+微信rpx自适应
福仔的博客
02-15 3257
所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。
pc适配怎么用lib-flexible和postcss-px2rem、px2rem-loader
03-31
使用lib-flexible和postcss-px2rem、px2rem-loader进行PC适配的步骤如下： 1. 安装依赖 ``` npm install lib-flexible postcss-px2rem px2rem-loader --save-dev ``` 2. 在项目根目录下创建postcss.config.js文件，并添加以下配置： ``` module.exports = { plugins: { 'postcss-px2rem': { remUnit: 75 // 设计稿宽度/10，如750/10=75 } } } ``` 3. 在webpack.config.js文件中添加以下配置： ``` module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'px2rem-loader' ] } ] } } ``` 4. 在入口文件（如index.js）中引入lib-flexible： ``` import 'lib-flexible'; ``` 5. 在需要适配的CSS文件中使用px作为单位，如： ``` div { width: 100px; height: 50px; font-size: 20px; } ``` 6. 执行webpack打包命令，即可完成PC适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值