移动端不同分辨率适配--使用flexible
2024-09-21 10:14:59
根据阿里手淘团队发布的可伸缩布局方案amfe-flexible,git地址:https://github.com/amfe/lib-flexible。
使用方法:
lib-flexible
库的使用方法非常的简单,只需要在Web页面的<head></head>
中添加对应的flexible_css.js,flexible.js
文件
第一种方法是将文件下载到你的项目中,然后通过相对路径添加:
<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>
或者直接加载阿里CDN的文件:
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
容器或组件宽高主要使用单位 rem
,字体大小则不变仍然使用单位 px
。
示例地址:https://github.com/amfe/article/issues/17
还有一个约束是,如果针对iphone5 640*1136,因此我们限制最外层包裹的div最大宽度为 640px,表示10rem;
把视觉稿中的px
转换成rem的
换算方法:要转换的像素值 / 640px * 10
最新文章
- speex进行音频去噪
- dijkstra 最短路算法
- HttpHelper类
- ubuntu下取代ping的好工具tcpping
- Javascript配合jQuery实现流畅的前端验证
- HDU 4948
- [课程相关]homework-01
- 关闭ES动态创建type
- jsp+servlet 上传图片实例
- 【Itext】7步制作Itext5页眉页脚pdf实现第几页共几页
- 第三方库API接口
- [Swift]LeetCode883. 三维形体投影面积 | Projection Area of 3D Shapes
- 3.git 分支操作
- UML第一次作业
- Python 豆瓣源
- C# byte和10进制、16进制相互转换
- SpringBoot 中使用redis以及redisTemplate
- nginx检查报错 error while loading shared libraries: libprofiler.so.0: cannot open shared object file: No such file or directory
- mysql数据库引擎InnoDB和MyISAM
- vue插件集合
热门文章
- 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)
- vim 编辑器常规操作
- Springboot简介01
- csharp: datatable get Column datatype or Column Name
- 判断当前浏览器是否支持HTML5的日期控件
- UOJ#347. 【WC2018】通道(边分治)
- Android之NDK环境配置+JNI开发+so文件编译
- Html5 填表 表单(二) input type 各种输入, 各种用户选择,上传等等泛输入用户交互
- laravel开发之-网站初建
- Java web中的web-xml中标签定义之jsp-config