移动端常见布局总结（三）——rem布局

最新推荐文章于 2024-05-03 15:54:26 发布

micoria

最新推荐文章于 2024-05-03 15:54:26 发布

阅读量1.6k

点赞数 2

分类专栏：布局文章标签： css

本文链接：https://blog.csdn.net/micoria/article/details/114017666

版权

布局专栏收录该内容

4 篇文章 2 订阅

订阅专栏

1. rem基础

思考一下问题，有便于下面学习rem布局。

页面布局文字能否岁屏幕的大小变化而变化？
流式布局和flex布局主要针对于宽度布局，那高度如何设置？（之前都是写死的高度）
怎样让屏幕发生变化的时候元素高度和宽度等比例缩放？（rem）

1.1 rem 和 em 单位

rem（root em）单位，是一个相对单位，是相对于根元素（HTML）的字体大小。
em单位，也是一个相对单位，相对于父元素字体大小

em解析

 <style>
	/*  em  说明*/
	div {
	     font-size: 12px;
	}
	p {
	     /* em 是相对于父元素 的字体大小设置的 */
	     width: 10em;
	     height: 5em;
	     font-size: 2em;
	 }
 </style>
 <body>
 	<div>
        <p>好好学习</p>
    </div>
 </body>

rem解析

rem的优点：可以通过修改html里面的文字大小改变页面中元素的大小可以整体控制。

<style>
	/* rem 说明*/
	html {
	 	font-size: 20px;
	}
	p {
		width: 20rem;
		height: 15rem;
	}
</style>
<body>
	<div>        
		<p>天天向上</p>
	</div>
</body>

2. 媒体查询（CSS3）

思考
如果根据界面的大小，调整HTML的字体大小，从而可以改变rem为单位的元素的大小。
现在字体根据rem写死了，但是怎样根据界面大小，来改变font-size？

2.1 媒体查询定义

媒体查询是CSS3的新语法。

使用媒体查询时，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
目前针对很多苹果手机、Android手机、平板等设备都用到多媒体查询

2.2 媒体查询语法规范

语法：

@media mediatype and|not|only (media feature) {
	CSS-Code;
}

注意：

用 @media 开头，注意@符号
mediatype 就是媒体类型
关键字 and | only | not
media feature 媒体特性必需有小括号包含

关键字详细说明

mediatype 查询类型

值	解释说明
all	用于所有设备
screen	用于电脑屏幕、平板屏幕、智能手机
print	用于打印机和打印预览

关键字
关键字就是将媒体类型或者多个媒体特性连接到一起作为媒体查询的条件。

and：可以将媒体类型或多个媒体特性连接到一起
only：指定某个特性的媒体类型，可省略
not：排除某个媒体类型，相当于“非”的意思，可省略

媒体特性
某种媒体类型都具有不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义页面最小可见区域的宽度
max-width	定义页面最大可见区域的宽度

2.3 媒体查询+rem

效果：当网页的页面随屏幕的缩放时，字体大小和盒子的高度也有所变化。
在这里插入图片描述

案例

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .container {
            min-width: 320px;
            height: 1rem;
            font-size: 0.3rem;
            color: #fff;
            background-color: rgb(176, 247, 167);
            text-align: center;
        }
</style>

<body>
    <div class="container">
        <h1>月薪过万</h1>
    </div>
</body>

2.4 媒体查询引入资源

引入资源就是针对不同的屏幕引入不同的css文件

<style>

</style>
<link href="style340.css" media="screen and(min-width:340px)">
<link href="style640.css" media="screen and(min-width:640px)">

link标签 + media属性，就是媒体引入资源

3. less 基础

由于 css 的弊端比较多，所以学习less

less优点：

有很好的计算能力
冗余度低
方便维护及扩展，可以复用

3.1 less介绍

less是一种扩展语言，也是css预处理器
less并没有减少css的功能，而且在css的语法上，增加了程序式语言的特性
引入了变量，Mixin（混入），运算以及函数等功能，简化了css的编写，将死了css的维护成本
less中文网址：http://lesscss.cn
常见的css预处理器：less、sass、stylus

3.2 less 安装

① 安装node.js
② 检查是否安装成功，使用cmd命令（window10使用window+r打开）输入“node -v” 查看版本即可
③ 使用cmd命令“npm install -g less”即可
npm：node package manager，node包管理工具
④ 检查less是否安装成功，使用cmd命令输入“lessc -v” 查看版本即可

总结：node作为一个软件进行安装，安装完成后就作为一个环境存在，一个可以运行js代码的环境。

问：-g是什么？全局安装。

npm install xxx -g时，模块将被安装到【全局目录】中。
【全局目录】通过 npm config set prefix “目录路径”来设置。
npm install xxx，则是将模块下载到当前命令行所在目录。
例如：
c:\123>npm install xxx
将会安装到
c:\123\node_modules\xxx

总结：全局安装之后，在哪个目录都可以使用。

3.3 less安装

1. less 使用之变量

变量是指没有固定的值，可以改变。

语法：

@变量名：值；
如：
@color：blue；

注意：

必须有@为前缀
不能包含特殊字符
不能以数字开头
区分大小写

代码：

/*定义变量*/
@color：blue;
@font：15px;
body {
	background-color: @color;
}
div {
	color: @color;
	font-size: @font;
}

2. less 编译

HTML没有办法直接使用less文件的。HTML只能使用css文件，如果要使less文件转换为css，则需要vocode Less插件：
Easy LESS插件是用来把less文件编译为css文件

3. less 嵌套

less嵌套如下：

#header .log {
	width: 200px;
}
/* less嵌套 */
#header {
	.logo {
		width: 200px;
	}
}

4. less 运算

任何数字、颜色或者变量都可以参与运算。可以进行加减乘除算术运算。
例如：

/* less里面写 */
@border-color: blue; 
@width: 10px + 5;
@height: (500px / 2);
div {
	height: @height;
	border: @width solid @border-color;
}

注意：

使用Esay Less插件新版本时，做除法的时候要在外面加括号，旧版本不需要
如果两个值前一个值加单位，后面一个值就不需要加单位
如果两个值都有单位，且不一样时，以第一个值的单位为准

5. rem 适配方案

适配的目标是什么？
答：
让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比适配当前设备。
怎样让一些无法等比自适应的元素，达到让设备尺寸发生改变时，等比适配当前设备？
答：
使用媒体查询，根据不同设备尺寸设置HTML字体大小，然后使用rem做尺寸单位。
当HTML字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。

6. 实际开发技术方案

按照设计稿与设备宽度的比例，动态计算并设置 HTML标签的 font-size 大小；（媒体查询）
CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位得值
实现后的效果：根据屏幕大小，所有元素都可以被适配
技术方案：

less + rem + 媒体查询
flexible.js + rem （推荐）

7. rem 实际开发适配方案1 --less + rem + 媒体查询

设计稿常见的尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 678	750px
Android	常见320px、360px、375px、384px、400px、414px、500px、720px大部分4.7~5寸的安卓设备为720px

现在基本以750为准

原理：动态设置html标签 font-size 大小
① 首先选择一套标准尺寸，如果设计稿是750px
② 将屏幕分成15等份，（10等份都可以）
③ 然后html的 font-size 字体大小就是 750 / 15 = 50px
④ 那么在最小屏幕下文字大小为320px / 15 = 21.33 px
⑤ 用页面的元素大小除以不同的HTML字体大小，它们的比例还是相同的
如：200 * 200 像素的元素，在 200 / 50 = 4rem，则为 4rem : 4rem = 1:1
所以他们的比例还是一样的。但是它们在不同尺寸的屏幕下会等比缩放适配。

最后的公式：
页面元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的份数）

为什么要划分份数？例如15份

+ 由于屏幕有不同的分辨率，我们计算出 html 的 font-size 文字大小。（屏幕划分的份数都是文字大小）
+ 在界面里面都是用rem 为单位，即 html为准的文字大小
+ 这样不同分辨率下的所有元素的大小，都会等比例缩放

8. rem 实际开发适配方案2 – flexible.js + rem

8.1 flexible.js介绍

它的原理是将屏幕尺寸分为10等份，但是在不同设备下，比例还是一致的。

flexible的代码分析：

  // set 1rem = viewWidth / 10 ： 设置1rem为设备的宽度/10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

8.2 rem适配方案2body样式修改

flexible与我们第一种方案不太一样，那么body的样式也会不一样：

body {
    min-width: 320px; /*两种方案必写，设置最小屏幕尺寸 */
    max-width: 750px; /* 增加*/
    /* flexible 给我们划分了 10 等份 */
    width: 10rem; /*修改*/
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
}

问题：

为什么需要设置 max-width:750px?
因为我们是使用flexible来处理的，没有媒体查询来限制条件
为什么width是10rem？
因为设置的 html的文字大小为 750 / 10 = 75px，然后想要rem值就得是 750 / 75 = 10rem。

micoria

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
移动端常见布局总结（三）——rem布局

1. rem基础思考一下问题，有便于下面学习rem布局。页面布局文字能否岁屏幕的大小变化而变化？流式布局和flex布局主要针对于宽度布局，那高度如何设置？（之前都是写死的高度）怎样让屏幕发生变化的时候元素高度和宽度等比例缩放？（rem）1.1 rem 和 em 单位rem（root em）单位，是一个相对单位，是相对于根元素（HTML）的字体大小。em单位，也是一个相对单位，相对于父元素字体大小em解析 <style> /* em 说明*/ div {
复制链接

扫一扫