XFE 技术 生活 笔记 文集

REM布局

🔖 技术 👀 42 🕒 2019-04-18 👨‍🎓 XFE/Peter

rem布局

rem

根据HTML根节点(html节点)的字体大小来确定rem的单位长度。

flexible.js

根据屏幕宽度确定html 节点的 font-size ,根据 手机dpr值设定 Viewprot scale的值

如下:iphone5s的 viewport 设置代码 (flexible.js自动生成)

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

本文主要来讲我现在一直采用的 flexible.js+rem解决方案 以及其他一些移动端需要注意的地方

先来一个例子

首先项目结构

┌styl┐
│ ├ common ┐
│ │ ├ public.styl
│ │ ├ common.styl
│ │ ├ ……
│ └ style.styl
├css┐
│ └style.css
├js ┐
│ ├ plugs┐
│ │ ├ felxible.js
│ ├
├img ┄
└html┐
├ index.html
├ ……

public.styl

这个文件主要用来存放,rem() px转像素的函数,以及一些公共的颜色变量,可复用的样式等!

common.styl

主要用来引入自动前缀,cssreset等模块 ,同时引入public.styl文件

style.styl

@import "common/common.styl"; // 引入 预先编写的 _common.styl 文件

body
width: 10rem //定义body的宽度充满全屏,在_public.styl 文件 和 flexible.js 文件
//里面是将移动端屏幕平均划分为 10等分。每一份一份为 1rem;

header
width: 10rem
height: rem(96) //此处嘉定设计的标题栏高度为 96px ,所以写法是将 96px 的数值
//传入rem() 函数中 ,scss在编译的时候回自动将其编译成rem

index.html

<!DOCTYPE html> <!-- -->
<html>
<head>
<meta charset="UTF-8">
<!-- 设置字符编码 -->
<meta name='apple-touch-fullscreen' content='yes'>
<!-- 设置在苹果手机上以应用模式启动时,是否全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios 系统 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<!-- iso 系统 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- iso 系统 作用未知 -->
<meta name="format-detection" content="telephone=no,email=no,address=no" />
<!-- 是否识别 手机号码、 电子邮件 地址 等-->
<title>演示</title>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入 flexible.js 必须在css之前引入 ,否则会引起屏幕闪烁 -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- 引入编译好的css -->
</head>
<body>

</body>
</html>

好了基本设置完毕,可以放心的使用量到的px值来写布局了。其他的flexible.js 和 Stylus 会帮你搞定

请注意如下部分

common.styl中

body
background-color: #eee
width: 10rem
max-width: 10rem //为了屏幕超出了宽度后,页面最大值为10rem
margin: 0 auto // 屏幕超宽后 body内容居中显示
font-size: font22
font-family:Helvetica,STHeiti,sans-serif
color: #333333
user-select: text //用户选择操作限制 ,避免用户选择文本以外的范围
opacity: 0 //入场动画初始值设定
transition: all 0.5s //入场动画效果设定

input,button,select //去掉安卓 和苹果给定的默认效果,方便自定义
border: none
outline: none
-webkit-appearance: none
-webkit-tap-highlight-color:rgba(255,255,255,0)
font-size: font20

在项目开始前,请在styl目录下面运行如下命令

stylus -w style.styl -o ../css/style.css

此时我们就可以在style.styl 中间直接通过px值来编写,自然预编译器会帮我转换成对于的rem值了

现行移动端多屏幕适配方案有Media Query(媒介查询) 和 rem两种,相对于Media Query来说 ,Rem 中 flexible.js 更适合懒人操作。

REM中遇到的问题

  1. 通常设计图的单位都是px,而我们使用rem单位之后,就涉及到了,px单位转换为rem单位;

  2. 在页面加载的时候,可能会出现一次闪动

px单位转rem单位解决方法

style.styl

//设计图宽度 640px 等分为10等分
/**
* rem单位长度
*/
fontSize = 64

/**
* 将px数值转换成rem数值的函数
* @param $n px数值
*/
rem(n)
if length(arguments) == 4
(arguments[0]/64)*1rem (arguments[1]/64)*1rem (arguments[2]/64)*1rem (arguments[3]/64)*1rem
else if length(arguments) == 3
(arguments[0]/64)*1rem (arguments[1]/64)*1rem (arguments[2]/64)*1rem
else if length(arguments) == 2
(arguments[0]/64)*1rem (arguments[1]/64)*1rem
else if length(arguments) == 1
(arguments[0]/64)*1rem

div
width: rem(640)
height: rem(128)

参数说明:

fontSize rem单位长度,这是理想状态下的数值,根据设计图确定,计算方法:设计宽度/等分份数

n px数值,有设计标注 ,或者,页面制作前自己标注。

style.css

div{
width:10rem
height:2rem
}

经过compass编译之后会得到如上图的结果

当然,flexible.js 也是需要设置的,如下图部分数值需要和scss中函数的数值对应

function t() {
var t = o.getBoundingClientRect().width;
t / i > 640 && (t = 640 * i), e.rem = t / 10, o.style.fontSize = e.rem + "px"
}

图中有两个640的数值,此处对应的是设计图宽度为640,
另有一处数值为10意思是将屏幕分为10等分,
次数两个数值 能得上文中
fontSize = 640/10 = 64;

加载时屏幕闪动的问题

将flexlibe.js文件放置在css样式文件之前加载,这样能够有效的减少屏幕闪动情况的出现