当前位置：首页 > news >正文

【移动WEB开发】rem适配布局

news 2025/12/27 2:21:34

1. rem基础

2.媒体查询

2.1 语法规范

2.2 媒体查询+rem

2.3 引入资源（理解）

3. less基础

3.1 维护css的弊端

3.2 less介绍

3.3 less变量

3.4 less编译

3.5 less嵌套

3.6 less运算

4. rem适配方案

4.1 rem实际开发

4.2 技术使用

4.3 rem+媒体查询+less

5. 苏宁网首页案例制作

6. rem适配方案2

1. rem基础

2.媒体查询

2.1 语法规范

        /* 媒体查询一般按照从大到小或从小到大的顺序 *//* 样式具有层叠性 *//* screen and 不能省略 *//* 数字后面必须跟单位,and后面要跟空格 */@media screen and (max-width:539px) {body {background-color: blue;}}@media screen and (min-width:540px) {body {background-color: green;}}@media screen and (min-width:970px) {body {background-color: red;}}

2.2 媒体查询+rem

        @media screen and (min-width:320px) {html {font-size: 50px;}}@media screen and (min-width:640px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}

2.3 引入资源（理解）

    <!-- 媒体查询最好从小到大写 --><!-- 引入资源就是针对不同屏幕尺寸,调用不同的css文件 --><link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"><link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

3. less基础

3.1 维护css的弊端

3.2 less介绍

3.3 less变量

3.4 less编译

3.5 less嵌套

3.6 less运算

除法运算要加小括号才能算

4. rem适配方案

4.1 rem实际开发

4.2 技术使用

4.3 rem+媒体查询+less

5. 苏宁网首页案例制作

将样式文件导入样式文件中

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><!-- 顶部搜索框 --><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" value="厨卫保暖季"></form></div><a href="#" class="login">登录</a></div><!-- banner 部分 --><div class="banner"><img src="upload/banner.gif" alt=""></div><!-- 广告部分 --><div class="ad"><a href="#"><img src="upload/ad1.gif" alt=""></a><a href="#"><img src="upload/ad2.gif" alt=""></a><a href="#"><img src="upload/ad3.gif" alt=""></a></div><!-- nav --><nav><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a></nav>
</body></html>

common.less

// 设置常见屏幕尺寸，修改里面的html文字大小
a {text-decoration: none;
}html {// pc端也可以打开font-size: 50px;
}// 本次定义划分的份数为15
@no: 15;
@media screen and (min-width: 320px) {html {font-size: (320px / @no);}
}@media screen and (min-width:360px) {html {font-size: (360px / @no);}
}// 375 iphone 678
@media screen and (min-width:375px) {html {font-size: (375px / @no);}
}@media screen and (min-width:384px) {html {font-size: (384px / @no);}
}@media screen and (min-width:400px) {html {font-size: (400px / @no);}
}@media screen and (min-width:414px) {html {font-size: (375px / @no);}
}@media screen and (min-width:424px) {html {font-size: (424px / @no);}
}@media screen and (min-width:480px) {html {font-size: (480x / @no);}
}@media screen and (min-width:540px) {html {font-size: (540px / @no);}
}@media screen and (min-width:720px) {html {font-size: (720px / @no);}
}@media screen and (min-width:750px) {html {font-size: (750px / @no);}
}

index.less

// 将样式文件导入样式文件中
@import "common";body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, sans-serif;background: #f2f2f2;
}// search-content
@baseFont: 50rem;.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translate(-50%);width: 15rem;height: (88rem / @baseFont);background-color: #ffcc01;.classify {width: (44 / @baseFont);height: (70 / @baseFont);background: url(../images/classify.png);background-size: (44 / @baseFont) (70 / @baseFont);margin: (11 / @baseFont) (25 / @baseFont) (7 / @baseFont) (24 / @baseFont);}.search {flex: 1;input {// 去掉输入时的边框效果outline: none;width: 100%;border: 0;height: (66 / @baseFont);border-radius: (33 / @baseFont);background-color: #fff2cc;margin-top: (12 / @baseFont);font-size: (25 / @baseFont);color: #757575;padding-left: (55 / @baseFont);}}.login {width: (75 / @baseFont);height: (70 / @baseFont);margin: (10 / @baseFont);font-size: (25 / @baseFont);text-align: center;color: #fff;line-height: (70 / @baseFont);}
}// banner
.banner {width: (750 / @baseFont);height: (368 / @baseFont);img {width: 100%;height: 100%;}
}// ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}// nav
nav {width: (750 / @baseFont);a {float: left;width: (150 / @baseFont);height: (140 / @baseFont);text-align: center;img {display: block;width: (82 / @baseFont);height: (82 / @baseFont);margin: (10 / @baseFont) auto 0;}span {display: block;font-size: (25 / @baseFont);color: #333;margin-top: 5px;}}
}

6. rem适配方案2

flexible.js + rem

插件 cssrem 可以将px转换成rem；

这个插件默认的html文字大小 cssroot 16px；

在设置中搜索设置 cssroot ，将工作区的font size 设置为想要的。

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"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- 引入我们的flexible.js 文件 --><script src="js/flexible.js"></script><title>Document</title>
</head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action=""><input type="search" value="rem适配方案2很开心哦"></form></div><a href="#" class="login">登录</a></div>
</body></html>

index.css

body {min-width: 320px;max-width: 750px;/* flexible 给我们划分了 10 等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;}a {text-decoration: none;font-size: .333333rem;
}/* 这个插件默认的html文字大小 cssroot  16px *//* 
img {width: 5.125rem;height: 4rem;width: 1rem;width: 1.093333rem;height: 1rem;
} *//* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */@media screen and (min-width: 750px) {html {font-size: 75px !important;}
}/* search-content */.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 10rem;height: 1.173333rem;background-color: #FFC001;
}.classify {width: .586667rem;height: .933333rem;margin: .146667rem .333333rem .133333rem;background: url(../images/classify.png) no-repeat;background-size: .586667rem .933333rem;
}.search {flex: 1;
}.search input {outline: none;border: 0;width: 100%;height: .88rem;font-size: .333333rem;background-color: #FFF2CC;margin-top: .133333rem;border-radius: .44rem;color: #757575;padding-left: .733333rem;
}.login {width: 1rem;height: .933333rem;margin: .133333rem;color: #fff;text-align: center;line-height: .933333rem;font-size: .333333rem;
}

【移动WEB开发】rem适配布局

目录 1. rem基础 2.媒体查询 2.1 语法规范 2.2 媒体查询rem 2.3 引入资源（理解） 3. less基础 3.1 维护css的弊端 3.2 less介绍 3.3 less变量 3.4 less编译 3.5 less嵌套 3.6 less运算 4. rem适配方案 4.1 rem实际开发 4.2 技术使用 4.3 …...

编程日记 2025/3/10 14:39:51

25年携程校招社招求职能力北森测评材料计算部分：备考要点与误区解析

在求职过程中，能力测评是筛选候选人的重要环节之一。对于携程这样的知名企业，其能力测评中的材料计算部分尤为关键。许多求职者在备考时容易陷入误区，导致在考试中表现不佳。本文将深入解析材料计算部分的实际考察方向，并提供针对…...

编程日记 2025/3/10 14:36:47

【Elasticsearch入门到落地】9、hotel数据结构分析

接上篇《8、RestClient操作索引库-基础介绍及导入demo》上一篇我们介绍了RestClient的基础，并导入了使用Java语言编写的RestClient程序Demo以及将要分析的数据库。本篇我们就要分析导入的宾馆数据库tb_hotel表结构的具体含义，并分析如何建立其索引库。 …...

编程日记 2025/3/10 14:34:44

现代互联网网络安全与操作系统安全防御概要

现阶段国与国之间不用对方路由器，其实是有道理的，路由器破了，内网非常好攻击，内网共享开放端口也非常多，更容易攻击。还有些内存系统与pe系统自带浏览器都没有javascript脚本功能，也是有道理的，…...

编程日记 2025/3/10 14:32:42

轻量级TCC框架的实现

现有seata、tcc-transaction等tcc框架实现都较为重量级，今天主要带来一种轻量级的实现，大概只用了1200行代码实现。不依赖具体框架grpc、http、dubbo等，只需要业务系统按照标准化实现Try、Commit、Cancel实现接口即可。已解决悬挂、幂等、空…...

编程日记 2025/3/10 14:30:39

共绘智慧升级，看永洪科技助力由由集团起航智慧征途

在数字化洪流汹涌澎湃的当下，企业如何乘风破浪，把握转型升级的黄金机遇，已成为所有企业必须直面的时代命题。由由集团，作为房地产的领航者，始终以前瞻视野引领变革，坚决拥抱数字化浪潮，携手数字…...

编程日记 2025/3/10 14:28:36

小程序开发总结

今年第一次帮别人做小程序。从开始动手到完成上线，一共耗时两天。AI 让写代码变得简单、高效。不过，小程序和 Flutter 等大厂开发框架差距实在太大，导致我一开始根本找不到感觉。第一，IDE 不好用，各种功能杂糅在…...

编程日记 2025/3/10 14:27:35

元脑服务器：浪潮信息引领AI基础设施的创新与发展

根据国际著名研究机构GlobalData于2月19日发布的最新报告，浪潮信息在全球数据中心领域的竞争力评估中表现出色，凭借其在算力算法、开放加速计算和液冷技术等方面的创新，获得了“Leader”评级。在创新、增长力与稳健性两个主要维度上&#xff…...

编程日记 2025/3/10 14:25:32

uniapp+node+mysql接入deepseek实现流式输出

node import express from express; import mysql from mysql2; import cors from cors; import bodyParser from body-parser; import axios from axios; import { WebSocketServer } from ws; // 正确导入 WebSocketServerconst app express();// Middlewares app.use(cors…...

编程日记 2025/3/10 14:24:31

PHP MySQL 创建数据库

PHP MySQL 创建数据库引言在网站开发中，数据库是存储和管理数据的核心部分。PHP 和 MySQL 是最常用的网页开发语言和数据库管理系统之一。本文将详细介绍如何在 PHP 中使用 MySQL 创建数据库，并对其操作进行详细讲解。前提条件在开始创建数据库之…...

编程日记 2025/3/10 14:23:28

UE4 World, Level, LevelStreaming从入门到深入

前言在《塞尔达传说：旷野之息》中，玩家攀上初始高塔的瞬间，目光所及的山川湖泊皆可抵达；在《艾尔登法环》中，黄金树的辉光始终悬于地平线之上，指引玩家穿越无缝衔接的史诗战场。这些现代游戏杰作背后的核…...

编程日记 2025/3/10 14:22:27

3月8日实验

拓扑： 需求： 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分，PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3.学校内部路由使用静态路由&#…...

编程日记 2025/3/10 14:20:24

IO多路复用实现并发服务器

一.select函数 select 的调用注意事项在使用 select 函数时，需要注意以下几个关键点： 1. 参数的修改与拷贝 readfds 等参数是结果参数 ： select 函数会直接修改传入的 fd_set（如 readfds、writefds 和 exceptfds&#xf…...

编程日记 2025/3/10 14:19:22

【漫话机器学习系列】122.相关系数（Correlation Coefficient）

深入理解相关系数（Correlation Coefficient） 1. 引言在数据分析、统计学和机器学习领域，研究变量之间的关系是至关重要的任务。我们常常想知道：当一个变量变化时，另一个变量是否也会随之变化？如果会&…...

编程日记 2025/3/10 14:15:17

控制系统分类

文章目录定义与特点1. 自治系统（Autonomous System）与非自治系统（Non-Autonomous System）自治系统非自治系统 2. 线性系统（Linear System）与非线性系统（Nonlinear System）线性系统非…...

编程日记 2025/3/10 14:13:14

文档操作方法得合理使用

博主介绍：✌全网粉丝5W，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验…...

编程日记 2025/3/10 14:12:12

Python asyncIO 面试题及参考答案草

目录如何正确定义一个协程函数？直接调用协程会引发什么问题？使用 async def 定义的协程与普通函数执行流程有何本质区别？解释 asyncio.run () 的作用及与手动管理事件循环的差异为什么协程中必须使用 await 而非 yield 挂起操作？写出通过 async for 实现异步迭代器…...

编程日记 2025/3/10 14:09:08

计算机网络——交换机

一、什么是交换机？ 交换机（Switch）是局域网（LAN）中的核心设备，负责在数据链路层（OSI第二层）高效转发数据帧。它像一位“智能交通警察”，根据设备的 MAC地址精准引导数…...

编程日记 2025/3/10 14:06:05

matlab和FPGA联合仿真时读写.txt文件数据的方法

在FPGA开发过程中，往往需要将MATLAB生成的数据作为原始激励灌入FPGA进行仿真。为了验证FPGA计算是否正确，又需要将FPGA计算结果导入MATLAB绘图与MATLAB计算结果对比。下面是MATLAB“写.txt”、“读.txt”，Verilog“读.txt”、“写.txt”的代…...

编程日记 2025/3/10 14:05:03

解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统

目录 1. 前言 2.大模型微调概念简述 2.1. 按学习范式分类 2.2. 按参数更新范围分类 2.3. 大模型微调框架简介 3. DeepSpeek R1大模型微调实战 3.1.LLaMA-Factory基础环境安装 3.1大模型下载 3.2. 大模型训练 3.3. 大模型部署 3.4. 微调大模型融合基于SpirngBootVue2…...

编程日记 2025/3/10 14:03:01

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/12/25 9:44:21

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank？由于时间太久，我真忘记了。搜搜发现，还真有人和我一样。见下面的链接：https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/12/26 14:47:19

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。同样的技术也是 Power BI 数据…...

编程新知 2025/12/18 10:13:02

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...

编程新知 2025/9/7 0:12:53

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/12/24 8:04:06

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...

编程新知 2025/12/25 12:12:38

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/11/26 13:15:57