欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

轻松pick移动开发第二篇,rem布局

程序员文章站 2022-06-20 23:03:14
一、为什么要使用rem布局 前面我写了flex布局的优点,分配伸缩盒容器中子盒子占的份数及排列方式,使其不受屏幕缩放的影响,使布局变得简单。然而,在有些时候,不可避免要给盒子设置高度的值,怎么让高度也随着屏幕大小变化等比例缩放呢?另外,怎么让页面文字大小也随着屏幕的大小变化而缩放呢?rem布局就可以 ......

一、为什么要使用rem布局

前面我写了flex布局的优点,分配伸缩盒容器中子盒子占的份数及排列方式,使其不受屏幕缩放的影响,使布局变得简单。然而,在有些时候,不可避免要给盒子设置高度的值,怎么让高度也随着屏幕大小变化等比例缩放呢?另外,怎么让页面文字大小也随着屏幕的大小变化而缩放呢?rem布局就可以轻松解决这个问题。

二、rem布局的原理

1.rem

首先要了解什么是rem,rem (root em)是一个相对单位,1rem的值是页面html中font-size的大小。在布局中,我们统一使用rem作为设置宽高的基本单位,这样我们可以通过控制页面font-size的大小来使页面元素等比例缩放。

2.媒体查询和less。(less内容作为了解)

媒体查询是css3的新语法,使用 @media查询,可以针对不同的媒体类型定义不同的样式。在rem布局中,就是根据屏幕大小的变化,确定html中的font-size的值。

less(leanerstyle sheets 的缩写)是一门 css扩展语言,也成为css预处理器。它在css 的语法基础之上,引入了变量,mixin(混入),运算以及函数等功能,大大简化了 css 的编写,并且降低了 css的维护成本。

在rem布局中主要使用less文件来计算rem的值(盒子宽高的px值 / 1rem占的px值 = 宽高占的rem值)。在vscode中安装easyless插件可以自动生成与less文件同名的css文件,在页面引入css即可。但是这样换算比较麻烦,开发中我们通常使用flexible.js就可以替代less文件的功能了。

3.flexible.js

flexible.js就是一个封装好的js文件。可以计算出1rem等于多少px值,来直接进行px值和rem值之间的换算,也就不用less文件进行计算了。其原理是将屏幕大小分为10等份,每份大小是1rem的值,页面中的元素都是以rem来表示宽高的,这样随着屏幕尺寸大小的变化,页面元素也会进行缩放。但是使用flexible.js提前要在设置里面的cssrem中设置全局font-size的固定大小,一般是设计稿的大小除以10。

三、实例

1.实现的效果如下,我们可以发现它的元素根据页面的大小而等比例缩放。

750px屏幕下:

 轻松pick移动开发第二篇,rem布局

500px屏幕下的效果:

轻松pick移动开发第二篇,rem布局

2.实现方法

rem布局实现方式有两种,第一种是rem+less+媒体查询,但是less换算较麻烦,所以我们经常用第二种。第二种是rem+flexible,本文的案例是使用这种方式做的。

3.步骤。

首先引入flexible.js并搭建页面结构(先在设置中设置默认页面字体大小为750px / 10 = 75px)。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>rem布局详解</title>
    <script src="js/flexible.js"></script>      <!-- 引入flexible.js根据屏幕判断1rem的值 -->
    <link rel="stylesheet" href="css/normalize.css">    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="css/index.css">    <!-- 引入css样式 -->
</head>
<body>
    <header>
        <span class="classify"></span>      <!-- 左侧分类标志 -->
        <form action="">                    <!-- 中间搜索框 -->
            <input type="search" placeholder="抢购双十一">
        </form>
        <a href="#" class="login">登陆</a>   <!-- 右侧登录标志 -->
    </header>
</body>
</html>

然后书写css样式如下:

ps.我们在写页面样式时候写上对应的px值,flexible.js会直接生成对应的rem值,可以看到下面的代码长度的单位都是rem。

第一步,加入媒体查询条件。设置在页面大于设计稿宽度时,也按设计稿宽度设置font-size大小。html中设置的字体大小容易被覆盖,所以加上!important进行提权。

@media screen and (min-width:750px){
    html{
        font-size: 75px!important;
    }
}

第二步:body修饰。body要是10rem即设计稿宽度。然后根据屏幕缩放。

body{  
    width: 10rem;
    margin:0 auto;
}

第三步:header 书写,用到固定定位。

header{
    display: flex;  /* 父盒子添加伸缩盒布局属性 */
    position: fixed;
    top: 0;
    left:50%;
    transform: translatex(-50%);
    width: 10rem;
    height: 1.173333rem;
    background-color: #ffc001;
}

第四部:其余代码如下:

*{
    margin: 0;
    padding: 0;
}
.classify{
    width: .586667rem;
    height: .933333rem;
    background: url(../images/classify.png) no-repeat;
    background-size: .586667rem;
    margin:.146667rem .333333rem .093333rem;
}
header form{
    flex: 1;    /* 子盒子独占1份剩余空间 */
}
header input{
    width: 100%;
    height: .906667rem;
    margin-top: .133333rem;
    border-radius: .453333rem;
    background-color: #fff2cd;
    padding-left: .746667rem;
    font-size: .32rem;
    border: none;   /* 去除边框和轮廓线 */
    outline: none;
}
.login{
    /* display: block;  因为父盒子是伸缩盒布局,所以不需要 */
    margin: .133333rem .266667rem;
    height: .906667rem;
    line-height: .906667rem;
    font-size: .333333rem;
    color: #fff;
    text-decoration: none;
}

四:总结

rem的好处我们可以显而易见得看到了,任何长度都可以换成rem单位,这样页面元素可以随着页面大小变化进行缩放。实际开发中一般用混合式开发flex+rem模式。