前端移动Web第三天：苏宁首页-第二种简洁高效的rem适配方案flexible.js

最新推荐文章于 2022-12-06 19:06:56 发布

库库好困

最新推荐文章于 2022-12-06 19:06:56 发布

阅读量668

点赞数

分类专栏：一：移动WEB学习（看视频）文章标签： html css web css3 js

本文链接：https://blog.csdn.net/m0_46597922/article/details/105608461

版权

本文介绍了如何使用淘宝团队的flexible.js实现简洁高效的移动端适配，详细讲解了设置html字体大小、页面元素rem值计算以及如何在VSCode中使用cssrem插件将px转换为rem。通过此方案，可以避免媒体查询，简化移动页面制作流程。

摘要由CSDN通过智能技术生成

简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值：页面元素的px 值 / 75
剩余的，让flexible.js来去算

github地址：https://github.com/amfe/lib-flexible

使用适配方案2制作苏宁移动端首页

1. 技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局2（flexible.js + rem）
设计图：本设计图采用 750px 设计尺寸

2. 搭建相关文件夹结构

在这里插入图片描述

3. 设置视口标签以及引入初始化样式还有js文件

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

我们页面需要引入这个js文件：

在 index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>

4. body样式

body {
   
	min-width: 320px;
	width:10rem;
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial,Helvetica;
	background: #F2F2F2;
}

VSCode px 转换rem 插件 cssrem

在这里插入图片描述

注意：这个插件默认html字体大小为 16px，可以手动更改大小。

在这里插入图片描述

在这里即可显示是否更改完成：

然后重启 VScode 软件，即可使用这个插件！！！

以下为源代码（未写完）：

<!DOCTYPE html>
<html

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端移动Web第三天：苏宁首页-第二种简洁高效的rem适配方案flexible.js

简洁高效的rem适配方案flexible.js手机淘宝团队出的简洁高效移动端适配库我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html 文字大小就可以了比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以...
复制链接

扫一扫