移动Web开发——rem适配布局（完结）、苏宁首页实战

最新推荐文章于 2024-06-20 17:40:58 发布
最新推荐文章于 2024-06-20 17:40:58 发布
阅读量757 收藏 10
点赞数
分类专栏： rem适配布局 文章标签： html css js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhr_beyond/article/details/114276495
版权

rem适配布局（完结）

1.rem适配方案（第二种）

（1）使用技术

flexible.js+rem

（2）flexible.js的原理

github地址链接: https://github.com/amfe/lib-flexible.

不需要写不同的媒体查询，js做处理

原理：把设备划分成10等份，不同设备下，比例是一致的

我们要做的是确定好当前设备的 html大小

比如当前设计稿是750px，只需要把html文字大小设置为75px（750px/10）

页面元素 rem 值 = 页面元素的px值 / 75 ，剩余的让 flexible.js 来计算

（3）下载flexible.js

在这里插入图片描述
在这里插入图片描述

2.用技术2实现苏宁首页

在这里插入图片描述

（1）技术选型

方案：采取单独制作移动页面方案

技术：布局采取rem适配布局2（flexible.js + rem）

设计图：采取750px设计尺寸

（2）搭建相关文件结构

在这里插入图片描述

（3）设置视口标签以及初始化样式和js文件

html代码

// 初始化
<!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"/>
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/flexible.js"></script>
		<title>苏宁首页2</title>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

引入后检查网页发现，html文字大小已经设置成功，说明引入的js有效

（4）设置body样式

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #F2F2F2;
}
a{
	text-decoration: none;
}
/*如果屏幕超过750px，按照750px来走*/
@media screen and (min-width: 750px)  {
	html{
		font-size: 75px!important;
	}
}

我用的是HBuilderX，自带px转换rem功能，所以直接使用。其它编辑器能通过插件或者也是自带这个功能。

（5）顶部搜索模块（还是简略的做）

html代码

<!--顶部搜索-->
		<div class="search-content">
			<a href="#" class="classify"></a>
			<div class="search">
				<form>
					<span class="search-icon"></span>
					<input type="search" value="进口爆款第2件半价" />
				</form>
			</div>
			<a href="#" class="login"></a>
		</div>

css代码

/*顶部搜索*/
.search-content{
	display: flex;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 10rem;
	height: 1.173333rem;
	background-color: #B49DF8;
}
.search-content .classify {
  width: 0.48rem;
  height: 0.8rem;
  background: url(../images/classify.png) no-repeat;
  background-size: 0.48rem 0.8rem;
  margin: 0.146666rem 0.333333rem 0.093333rem 0.32rem;
}
.search-content .search {
  flex: 1;
  text-align: center;
  position: relative;
}
.search-content .search .search-icon {
  position: absolute;
  top: 0.346666rem;
  left: 0.6rem;
  width: 0.48rem;
  height: 0.48rem;
  background: url(../images/search-icon.png) no-repeat;
  background-size: 0.48rem 0.48rem;
}
.search-content .search input {
  width: 6.96rem;
  border: 0;
  height: 0.853333rem;
  border-radius: 0.426666rem;
  background-color: #fff;
  margin-top: 0.16rem;
  outline: none;
  font-size: 0.333333rem;
  line-height: 0.853333rem;
  padding-left: 0.8rem;
  color: #757575;
}
.search-content .login {
  width: 0.48rem;
  height: 0.8rem;
  background: url(../images/login.png);
  background-size: 0.48rem 0.8rem;
  margin: 0.146666rem 0.333333rem 0.093333rem 0.32rem;
}

效果图
在这里插入图片描述

（6）banner模块和广告模块（简略做不调色）

html代码

<!--banner部分-->
		<div class="banner">
			<img class="img1" src="images/banner.png" />
			<img class="img2" src="images/banner1.webp" />
		</div>
		<!--广告部分-->
		<div class="ad">
			<a href="#"><img src="upload/ad1.webp"/></a>
			<a href="#"><img src="upload/ad2.webp"/></a>
			<a href="#"><img src="upload/ad3.webp"/></a>
		</div>

css代码

/*banner部分*/
.banner {
  text-align: center;
  width: 10rem;
  height: 8.11rem;
  background-color: #B49DF8;
}
.banner .img1 {
  width: 9.333333rem;
  height: 4.906666rem;
}
.banner .img2 {
  width: 10rem;
  height: 3.13rem;
}

效果图（还是略丑hhhh）
在这里插入图片描述

（7）导航栏模块

html代码

<!--导航栏部分-->
		<div class="nav">
			<a href="#">
				<img src="upload/nav1.png" />
				<div class="title">苏宁秒杀</div>
			</a>
			<a href="#">
				<img src="upload/nav2.png" />
				<div class="title">苏宁超市</div>
			</a>
			<a href="#">
				<img src="upload/nav3.png" />
				<div class="title">苏宁拼购</div>
			</a>
			<a href="#">
				<img src="upload/nav4.png" />
				<div class="title">手机数码</div>
			</a>
			<a href="#">
				<img src="upload/nav5.png" />
				<div class="title">苏宁家电</div>
			</a>
			<a href="#">
				<img src="upload/nav6.png" />
				<div class="title">免费水果</div>
			</a>
			<a href="#">
				<img src="upload/nav7.png" />
				<div class="title">super会员</div>
			</a>
			<a href="#">
				<img src="upload/nav8.png" />
				<div class="title">签到有礼</div>
			</a>
			<a href="#">
				<img src="upload/nav9.png" />
				<div class="title">领券中心</div>
			</a>
			<a href="#">
				<img src="upload/nav10.png" />
				<div class="title">更多频道</div>
			</a>
		</div>

css代码

/*导航栏部分*/
.nav {
  width: 10rem;
}
.nav a {
  float: left;
  width: 2rem;
  height: 1.893333rem;
  text-align: center;
}
.nav a img {
  display: block;
  width: 1.12rem;
  height: 1.12rem;
  margin: 0.133333rem auto 0;
}
.nav a .title {
  font-size: 0.266666rem;
  color: #666;
}

效果图
在这里插入图片描述

（8）底部模块

html代码

<!--底部部分-->
		<div class="foot-content">
			<a href="#">
				<img src="upload/guess.png" />
				<div class="guess">猜你喜欢</div>
			</a>
			<a href="#">
				<img src="upload/classify.png" />
				<div>分类</div>
			</a>
			<a href="#">
				<img src="upload/list.png" />
				<div>排行榜</div>
			</a>
			<a href="#">
				<img src="upload/shop.png" />
				<div>购物车</div>
			</a>
			<a href="#">
				<img src="upload/mine.png" />
				<div>我的易购</div>
			</a>
		</div>

css代码

/*底部部分*/
.foot-content {
  position: fixed;
  display: flex;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 1.333333rem;
  background-color: #fff;
  text-align: center;
}
.foot-content img {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
  margin: 0.16rem auto 0;
}
.foot-content a {
  flex: 1;
}
.foot-content div {
  color: #000;
  font-size: 0.266666rem;
}
.foot-content .guess {
  font-weight: bold;
}

同样我们还是给body一个高度，展示出效果
效果图
在这里插入图片描述

到这里rem适配布局系列学习笔记已经完结

总结一下：已经能熟练的运用rem布局和flex布局混合实现页面，也能实现不同档位的屏幕整体缩放，技术很方便实用。

红人日天
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
苏宁易购2-(remb+js布局)
03-08
rem布局练习
移动web开发_rem布局、rem 基础、媒体查询、Less 基础 、rem 适配方案、 苏宁首页案例制作
weixin_51353891的博客
06-14 197
学习目标： 能够使用 rem 单位 能够使用媒体查询的基本语法 能够使用 Less 的基本语法 能够使用 Less 中的嵌套 能够使用 Less 中的运算 能够使用 2 种 rem 适配方案 能够独立完成苏宁移动端首页 移动web开发之rem布局 1.rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换.
1.结合flexible.js实现页面自适应
最新发布
2201_76056241的博客
06-20 468
flexible.js下载链接：https://pan.baidu.com/s/1RToh6kAFVVckuvtH0EG-rw?电脑屏幕为1920px,在flexible.js中，默认分为10份，改为分为24份，所以1920/24 = 80。使用flexible.js可以实现页面自适应，单位使用rem，会随页面的变化而自适应页面的内容。F12坚持是否引入成功，font-size会随着页面而变化，代表引入成功。安装如图所示插件，将基准改为80（80px 代表1rem）将flexible.js引入到项目中。
移动端项目-苏宁首页
m0_57249797的博客
10-14 218
目录 苏宁首页common.less制作 苏宁首页import导入样式 苏宁首页body样式设置 苏宁首页search-content模块布局 苏宁首页search-content内容布局 苏宁首页search模块制作 苏宁首页banner和广告模块制作 苏宁首页nav部分制作 rem适配方案2flexible.js简介 rem适配方案2苏宁首页前期准备工作 rem适配方案2body样式修改 一个神奇的vscode插件cssrem 修改flexible默认html字体大小 rem适配方案2search-c
移动端web总结（三）——苏宁项目总结
yanzi_0216的博客
09-03 353
苏宁项目知识点总结（less+rem） 1，less语法注意事项 less声明变量使用@作为前缀，声明函数使用‘.’作为前缀。 在要被引入html文件中的less文件或要直接转换为css文件的less文件中，应该在第一行声明编码方式，防止编译时乱码： @charset “UTF-8”; 。 less中使用计算时，算数符号的前后都应该有空格。 2，less实现遍历 less没有循环语法，可以使用函数的迭代实现循环，为了避免死循环可以给函数的执行附加条件（根据数组的长度去停止当前循环），需要通过序号来判断
移动端苏宁首页制作和rem
qq_44757223的博客
04-11 1282
制作苏宁移动端首页的两种方法、px转换为rem
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
移动Web开发中的“rem适配布局”是一种针对不同屏幕尺寸和分辨率进行自适应设计的方法，主要应用于智能手机和平板电脑等移动设备。在这个“苏宁首页案例制作”中，我们将深入探讨如何利用rem单位来构建响应式的网页...
移动web开发-rem布局案例源码，html+css素材
02-16
在移动Web开发中，REM（Root EM）布局是一种常见的响应式设计策略，它允许开发者以相对于根元素（通常是html元素）的字体大小来设置元素的尺寸。这种布局方式能够确保在不同屏幕尺寸和设备上提供一致的视觉体验，...
移动web开发，rem适配方案
10-31
总的来说，移动Web开发的rem适配方案是通过合理设置视口和利用rem单位，配合媒体查询，实现网页在不同设备上的自适应布局。flexible.js+rem和less+rem+媒体查询是两种实用的策略，能够帮助开发者应对移动设备的屏幕...
移动WEB开发_rem布局01-rem单位.html
04-14
移动WEB开发
详解rem 适配布局
09-22
**rem适配布局详解** 随着手机型号的多样化，前端开发者面临着如何实现跨设备自适应布局的挑战。在这样的背景下，`rem`单位应运而生，成为解决这一问题的关键技术。`rem`（root em）是一种相对单位，它基于根元素...
基础回顾（九) | 苏宁项目Rem
qq_43352105的博客
01-22 209
文章目录Rem—苏宁项目Rem单位媒体查询简介语法规范Rem媒体实现动态变化媒体查询引入方式Less基础css弊端Less简介和安装Less基础Rem的适配方案适配目标？如何达到？实际开发？苏宁项目公共样式common.less文件制作新建index.less文件顶部结构轮播图部分flexible.js简介改进实现改进实现 Rem—苏宁项目 思考？ 页面布局文字能否随屏幕变化而变化？ 如何让屏幕发生变化是，宽高等比例变化？ Rem单位 是一个相对单位，类似于em，em是父元素字体的大小 rem的基准是
苏宁首页案例（rem布局）
yexiangCSDN的专栏
05-11 507
一、rem适配方案 1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。 rem 实际开发适配方案 ① 按照设计稿与设备宽度的比例，动态计算并设置 html 根标签的 font-size 大小；（媒体查询） ② CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值； ..
移动端rem布局项目之苏宁首页
Satosere的博客
01-21 360
移动端rem布局项目之苏宁首页 文章目录移动端rem布局项目之苏宁首页前言一、`（less + rem + 媒体查询）`方式的前期准备1.1 建立文件夹1.2 设置视口标签以及引入初始化样式1.3 设置common.less文件1.3.1 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小1.3.2 划分的份数我们定为 15等份1.3.3 设计稿为750px尺寸1.4 设置index.less文件1.4.1 将common.less引入到index.less中`@import “common”
移动端三种布局方式之rem布局-苏宁首页（技术方案一：less、rem、媒体查询）
JadeDu_的博客
08-21 492
结果图 em是相对于父元素的字体大小来说的，rem（root em）是相对于html元素来说的， less编译器的使用 css样式写在less文件里 自动生成css文件 后续方便修改 和rem布局搭配使用 rem实际开发啊适配方案1 元素大小的取值：（1）页面元素的rem值=页面元素之（px）/（屏幕宽度/划分的份数）                    (2)屏幕宽度/划分的份数就
前端移动Web第三天：苏宁首页-第二种简洁高效的rem适配方案flexible.js
m0_46597922的博客
04-19 668
简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以 ...
苏宁网移动端首页
weixin_49455047的博客
12-13 662
目录 1.技术选型 2.设置公共common.less文件 3.新建index.less文件 4.遇到的问题 1.给input加padding时盒子被撑大，影响布局 2.使用适配方案2制作苏宁移动端首页 1.技术选型 2.搭建相关文件夹结构 3.设置视口标签及js文件 4.VSCode px转换rem插件cssrem 5.遇见的问题 1.技术选型 方案：我们采取单独制作移动端页面方案 技术：布局采用rem适配布局（less+rem+媒体查询） 设计图：本设计图采用750p.
flexible.js 适配移动端详解
weixin_71280597的博客
02-18 888
flexible.js 适配移动端详解
使用rem实现pc、移动端自适应布局
qfCSDN的博客
11-18 5674
可以根据设计稿宽度设置，获取到当前屏幕font-size大小，设置到蓝湖上，直接转换为rem进行布局即可。1rem的大小是通过html下的根字体大小（font-size）这个css属性告诉浏览器的。比如 ： 设置html当前font-size = 10px；那么1rem = 10px;（假如设计稿宽度是750），有一个预设的rem和px的比例。（假如是425px），那么他此时1rem的尺寸。2.获取用户浏览器的可视区域的宽度。（假如是1rem = 10px）
移动Web开发总结：自适应布局与性能优化
"移动Web学习总结" ...移动Web开发不仅涉及到技术层面的布局、事件处理和优化，还包括对用户界面的适应性和用户体验的深度考量。开发者需要不断学习和掌握新的技术，以应对日新月异的移动互联网环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值