项目自适应cssrem + flexable.js

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量713 收藏 2
点赞数 4
分类专栏： 项目实战 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frazier1995/article/details/125995661
版权

cssrem插件

先要安装下这个插件，可以将px转化为rem，默认是16px，也可以手动设置修改

 修改文字大小

​ 1.Ctrl+Shift+p打开命令面板

 2.输入settings.json，选择图中标出的json

 使用时

 flexable.js

flexable.js是手机淘宝解决不同设备的适配问题，主要有三个方面：

  1. 动态改写<meta>标签
  2. 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
  3. 给<html>元素添加font-size属性，并且动态改写font-size的值

具体文件可去官网下载

晚风吹心事
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
tryrem.rar
12-06
基于vue2.x 的flexable +px2rem自适应浏览器 以及scss的换肤demo npm install node-sass sass-loader --save-dev
西门子老触摸屏移植到新触摸屏.pdf
08-06
西门子WINCCflexable2008程序一直到博图
手写简易版flexible.js以及源码分析
阿牛的博客
07-01 962
我们的移动端布局通常会有rem结合媒体查询的实现，但是，淘宝有这样的一个flexible.js框架，根据不同的width给网页中html根节点设置不同的font-size，大大提高了我们的开发效率，今天阿牛便带你手写一个简易版flexible.js并解读，了解他的大致原理。...
手写flexible.js的原理实现，我终于明白移动端多端适配
weixin_43964148的博客
08-04 862
上周优化了个跑马灯，原因是跑马灯的长度太长了，每个item的节点比较多，所以即使限制最多只有50个item，也还是很长很长，有多长可以看看下面
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 1862
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
移动端适配方案
lishuaihao的博客
09-22 724
今天向大家介绍一下移动端的其中一种适配方案——rem适配 当我们想要我们的一个页面同时适配pc端与移动端的时候，我们必须要使用媒体查询，去针对各种屏幕进行适配，相当的麻烦，因此我么你决议使用淘宝推出的flexible.js(大家可以去github上搜索并下载)，它是采用rem单位加上媒体查询去适配各种屏幕的。rem与媒体查询是什么在这里就不过多介绍了，下面我就教大家如何去使用flexible。 先将下载好的flexible引入进来，如 如果引入成功的话，我们拉动浏览器就会看到font-size在不停地变化，
rem移动适配解决方案及flexible.js插件使用
m0_59812088的博客
11-26 2184
rem移动适配解决方案及flexible.js插件使用
flexible.js实现rem自适应布局
小福气的博客
02-22 1096
flexible.js的rem自适应布局
wincc flexible 2008 sp5安装包+更新包-链接地址.txt
07-28
wincc flexible 2008 sp5安装包+更新包_链接地址
FlexAble-开源
07-20
一个 Adob​​e AIR 应用程序，用于管理个人健康和健身信息，例如饮食和锻炼。
vue-flexible
10-26
在描述中提到的`vue-config.js`，通常是项目配置文件，用于设置项目的一些全局属性。在这个场景下，可能是用于配置`vue-flexible`的基数或者其他的适配设置。基数（baseWidth）是指设计师设计界面时所参考的基础宽度...
flexible.js
07-05
淘宝自适应插件flexible.js，根据屏幕适配html和font-sizi 公式：结果=测量数据/75，比如100px,100/75=1.33333rem,因为rem值(html标签字体大小)插件自己设置了，所以使用就直接写1.3333rem 用法：导入插件=> rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则1rem=64px来运算。 flexible默认是分成10份；所以1rem = 75px; 在pc端显示时，如果我们的屏幕超过了750px，就按照750设计稿走，不会让我们的页面超过750px
flexble.js自适应布局
weixin_45162984的博客
03-04 641
flexble.js自适应布局一，flexible.js 的使用方式：（一），引用方式（二），flexible.js原理（三），把视觉稿中的px转换成rem 一，flexible.js 的使用方式： github地址：https://github.com/amfe/lib-flexible 官方文档地址：https://github.com/amfe/article/issues/17 本文中有部分内容引至上面这个文档。 （一），引用方式 1，引用cdn地址 <script src="http://g
移动端H5 不同设备 px表现不一致
weixin_40577113的博客
11-19 733
<!DOCTYPE html> <html> <head> <style> html,body{ padding: 0; margin: 0; } </style> </head> <body> <div style="background: black;width: 375px;...
flexible.js淘宝移动端rem自适应用法
笔记
10-21 878
1、设置视窗，如下两种都行 <!-- <meta name="viewport" content="width=device-width,user-scalable=no initial-scale=1, shrink-to-fit=no"> --> <meta name="viewport" content="width=device...
rem适配方案2（flexible.js）
banque8080的博客
08-16 206
px 2 rem 转载于:https://www.cnblogs.com/flyerya/p/11361490.html
JS+CSS自适应屏幕
山山而川~
02-08 1103
布局适配方式 Media Query（媒体查询）：现在比较主流的适配方案，可根据视口不同编写不同样式达到适应效果，比如框架Bootstrap，它能完成大部分项目需求，但是编写过于复杂。 flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，也是现在使用最多的布局方式。 固定高度，宽度百分比：这种方法只适合简单要求不高的webApp，一般在适应要求不高，或者大屏显示没有要求时候可以使用。 rem 单位介绍 rem（font size of the root element）是相对长度单位
flexible.js + makegrid.js 自适应布局
weixin_33895695的博客
11-17 513
一，flexible.js 的使用方式： （一），引用方式 1，引用cdn地址 &lt;script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"&gt;&lt;/script&gt; 当前最新的版本是0.3.2。 2，下载flexible.js 等文件到项目指定目录下，然后在head中...
flexible.js原理解析
weixin_33738555的博客
04-30 5914
flexible原理解析 github仓库：github.com/amfe/lib-fl… 使用方法 安装 npm i -S amfe-flexible 复制代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=...
flexable.js
07-28
Flexable.js 是一个 JavaScript 库，用于创建响应式的布局和弹性盒子模型。它提供了一些方法和属性，使得在不同设备上调整和适应布局变得更加容易。你可以使用 Flexable.js 来创建灵活的布局，以便在不同大小的屏幕上呈现良好的用户体验。它可以帮助你实现自适应的网页设计，以适应不同的屏幕尺寸和设备类型。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晚风吹心事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值