移动Web开发——rem适配布局（六）

最新推荐文章于 2022-07-10 20:43:05 发布

红人日天

最新推荐文章于 2022-07-10 20:43:05 发布

阅读量424

点赞数 1

分类专栏： rem适配布局文章标签： css html

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114251012

版权

rem适配布局专栏收录该内容

8 篇文章 0 订阅

订阅专栏

rem适配布局（六）

学习目标

（1）能够使用rem单位

（2）能够使用媒体查询的基本语法

（3）能够使用Less的基本语法

（4）能够使用Less中的嵌套

（5）能够使用Less中的运算

（6）能够使用2种rem适配方案

（7）能够独立完成苏宁移动端首页

1.rem适配方案

（1）提出问题

我们使用rem适配的目标是什么？怎么去实现它？

① 让一些不能等比的自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

② 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

（2）rem实际开发适配方案

① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size大小；（媒体查询）

② CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值

（3）rem 适配方案技术使用（市场主流）

技术方案1 ● Less ● 媒体查询 ● rem

技术方案2 （推荐）● flexible.js ● rem

2.rem 实际开发适配方案1

（1）使用技术

rem + 媒体查询 + less 技术

（2）设计稿常见尺寸宽度

设备	常见宽度
iphone 4 5	640px
iphone 6 7 8	750px
Android	大部分4.7-5寸的安卓设备为720px

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为标准

（3）动态设置 html 标签 font-size 大小

比如我们的设计稿是750px，把整个屏幕划分成15等份，每一份作为html字体大小，所以为 50px

在320px的设备的时候，同理，字体大小为 21.33px

以750为标准设计稿，一个100*100像素的页面在750屏幕下，转换为rem是2rem*2rem，比例也就是1:1

在320屏幕下，html 字体大小为21.33 则 2rem = 42.66px 宽高比例仍然是1:1

所以我们已经能实现在不同屏幕下页面元素盒子等比例缩放的效果

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<title></title>
		<style>
			@media screen and (min-width: 320px) {
				html{
					font-size: 21.33px;
				}
			}
			@media screen and (min-width: 750px) {
				html{
					font-size: 50px;
				}
			}
			div{
				width: 2rem;
				height: 2rem;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

大于750屏幕
在这里插入图片描述
320屏幕

（4）元素大小取值方法

① 页面元素的rem值 = 页面元素值（px）/（屏幕宽度 / 划分的份数）

② 屏幕宽度 / 划分的份数就是html font-size 的大小

红人日天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动Web开发——rem适配布局（六）

rem适配布局（六）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.rem适配方案（1）提出问题我们使用rem适配的目标是什么？怎么去实现它？① 让一些不能等比的自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备② 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸
复制链接

扫一扫