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

最新推荐文章于 2022-07-21 11:52:52 发布

库库好困

最新推荐文章于 2022-07-21 11:52:52 发布

阅读量678

点赞数

分类专栏：一：移动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元/天解锁文章