(七）移动端前端开发-基于rem布局案例2

孤傲倾城

已于 2023-02-13 23:03:06 修改

阅读量160

点赞数

分类专栏：移动端前端开发文章标签： html 前端 javascript css

于 2023-02-12 16:23:13 首次发布

本文链接：https://blog.csdn.net/m0_56517198/article/details/128993514

版权

文章目录

基于rem布局—制作淘宝交易成功页面头部信息

基于rem布局—制作淘宝交易成功页面头部信息

请添加图片描述

1.需求说明

HTML部分包含头部、交易成功、地址三部分。
使用相对单位rem设置页面字体、宽度等大小尺寸。
通过javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小。
让页面自适应不同型号屏幕的移动设备。

1.1 back.png

在这里插入图片描述

1.2 qhome.png

在这里插入图片描述

1.3 supchenge.png

在这里插入图片描述

1.4 supchock.png

在这里插入图片描述

1.5 position.png

在这里插入图片描述

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
	<title>淘宝交易成功页面</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/reset.css">
</head>
<body>
	<!--实现步骤：
	1.引入meta标签
	2.css设置字体大小，html-fontsize
	3.js设置字体大小
	4.搭建页面结构
	5.调整css样式 -->
	<div class="box">
	<!--淘宝交易成功页面的头部信息部分-->
		<div class =

最低0.47元/天解锁文章

孤傲倾城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
(七）移动端前端开发-基于rem布局案例2

移动端前端开发，基于rem布局，制作淘宝交易成功页面头部。通过javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小。使用相对单位rem设置页面字体、宽度等大小尺寸。HTML部分包含头部、交易成功、地址三部分。让页面自适应不同型号屏幕的移动设备。
复制链接

扫一扫