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

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

news 2025/9/14 13:36:03

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2025/9/13 21:23:27

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性：电力载波技术在楼宇自控中的核心价值在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...

编程新知 2025/8/11 11:25:20

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/9/2 16:54:05