【移动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 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 …...
25年携程校招社招求职能力北森测评材料计算部分：备考要点与误区解析
在求职过程中，能力测评是筛选候选人的重要环节之一。对于携程这样的知名企业，其能力测评中的材料计算部分尤为关键。许多求职者在备考时容易陷入误区，导致在考试中表现不佳。本文将深入解析材料计算部分的实际考察方向，并提供针对…...
【Elasticsearch入门到落地】9、hotel数据结构分析
接上篇《8、RestClient操作索引库-基础介绍及导入demo》 上一篇我们介绍了RestClient的基础，并导入了使用Java语言编写的RestClient程序Demo以及将要分析的数据库。本篇我们就要分析导入的宾馆数据库tb_hotel表结构的具体含义，并分析如何建立其索引库。 …...
现代互联网网络安全与操作系统安全防御概要
现阶段国与国之间不用对方路由器，其实是有道理的，路由器破了，内网非常好攻击，内网共享开放端口也非常多，更容易攻击。还有些内存系统与pe系统自带浏览器都没有javascript脚本功能，也是有道理的，…...
轻量级TCC框架的实现
现有seata、tcc-transaction等tcc框架实现都较为重量级，今天主要带来一种轻量级的实现，大概只用了1200行代码实现。不依赖具体框架grpc、http、dubbo等，只需要业务系统按照标准化实现Try、Commit、Cancel实现接口即可。 已解决悬挂、幂等、空…...
共绘智慧升级，看永洪科技助力由由集团起航智慧征途
在数字化洪流汹涌澎湃的当下，企业如何乘风破浪，把握转型升级的黄金机遇，已成为所有企业必须直面的时代命题。由由集团，作为房地产的领航者，始终以前瞻视野引领变革，坚决拥抱数字化浪潮，携手数字…...
小程序开发总结
今年第一次帮别人做小程序。 从开始动手到完成上线，一共耗时两天。AI 让写代码变得简单、高效。 不过，小程序和 Flutter 等大厂开发框架差距实在太大，导致我一开始根本找不到感觉。 第一，IDE 不好用，各种功能杂糅在…...
元脑服务器：浪潮信息引领AI基础设施的创新与发展
根据国际著名研究机构GlobalData于2月19日发布的最新报告，浪潮信息在全球数据中心领域的竞争力评估中表现出色，凭借其在算力算法、开放加速计算和液冷技术等方面的创新，获得了“Leader”评级。在创新、增长力与稳健性两个主要维度上ÿ…...
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…...
PHP MySQL 创建数据库
PHP MySQL 创建数据库 引言 在网站开发中，数据库是存储和管理数据的核心部分。PHP 和 MySQL 是最常用的网页开发语言和数据库管理系统之一。本文将详细介绍如何在 PHP 中使用 MySQL 创建数据库，并对其操作进行详细讲解。 前提条件 在开始创建数据库之…...
UE4 World, Level, LevelStreaming从入门到深入
前言 在《塞尔达传说：旷野之息》中，玩家攀上初始高塔的瞬间，目光所及的山川湖泊皆可抵达；在《艾尔登法环》中，黄金树的辉光始终悬于地平线之上，指引玩家穿越无缝衔接的史诗战场。这些现代游戏杰作背后的核…...
3月8日实验
拓扑： 需求： 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分，PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3.学校内部路由使用静态路由&#…...
IO多路复用实现并发服务器
一.select函数 select 的调用注意事项 在使用 select 函数时，需要注意以下几个关键点： 1. 参数的修改与拷贝 readfds 等参数是结果参数 ： select 函数会直接修改传入的 fd_set（如 readfds、writefds 和 exceptfds…...
【漫话机器学习系列】122.相关系数（Correlation Coefficient）
深入理解相关系数（Correlation Coefficient） 1. 引言 在数据分析、统计学和机器学习领域，研究变量之间的关系是至关重要的任务。我们常常想知道：当一个变量变化时，另一个变量是否也会随之变化？如果会&…...
控制系统分类
文章目录 定义与特点1. 自治系统（Autonomous System）与非自治系统（Non-Autonomous System）自治系统非自治系统 2. 线性系统（Linear System）与非线性系统（Nonlinear System）线性系统非…...
文档操作方法得合理使用
博主介绍：✌全网粉丝5W，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验…...
Python asyncIO 面试题及参考答案 草
目录 如何正确定义一个协程函数？直接调用协程会引发什么问题？ 使用 async def 定义的协程与普通函数执行流程有何本质区别？ 解释 asyncio.run () 的作用及与手动管理事件循环的差异 为什么协程中必须使用 await 而非 yield 挂起操作？ 写出通过 async for 实现异步迭代器…...
计算机网络——交换机
一、什么是交换机？ 交换机（Switch）是局域网（LAN）中的核心设备，负责在 数据链路层（OSI第二层）高效转发数据帧。它像一位“智能交通警察”，根据设备的 MAC地址 精准引导数…...
matlab和FPGA联合仿真时读写.txt文件数据的方法
在FPGA开发过程中，往往需要将MATLAB生成的数据作为原始激励灌入FPGA进行仿真。为了验证FPGA计算是否正确，又需要将FPGA计算结果导入MATLAB绘图与MATLAB计算结果对比。 下面是MATLAB“写.txt”、“读.txt”，Verilog“读.txt”、“写.txt”的代…...
解锁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…...
【分布式】聊聊分布式id实现方案和生产经验
对于分布式Id来说，在面试过程中也是高频面试题，所以主要针对分布式id实现方案进行详细分析下。 应用场景 对于无论是单机还是分布式系统来说，对于很多场景需要全局唯一ID， 数据库id唯一性日志traceId 可以方便找到日志链&#…...
uniapp或者vue 使用serialport
参考https://blog.csdn.net/ykee126/article/details/90440499 版本是第一位：否则容易编译失败 node 版本 18.14.0 npm 版本 9.3.1 electron 版本 30.0.8 electron-rebuild 版本 3.2.9 serialport 版本 10.0.0 需要python环境 main.js // Modules to control app…...
机器学习12-视觉识别任务
机器学习12-视觉识别任务 分类语义分割滑动窗口滑动窗口的实现思路优点缺点现代替代方法 全卷积（Fully Convolutional Networks, FCN）FCN 的工作原理FCN 的性能优势FCN 的应用案例FCN 的局限性改进方向下采样可学习的上采样:转置卷积 目标检测区域建议Se…...
使用paramiko爆破ssh登录
一.确认是否存在目标主机是否存在root用户 重跑 CVE-2018-15473用户名枚举漏洞 检测： import paramiko from paramiko.ssh_exception import AuthenticationExceptiondef check_user(username, hostname, port):ssh paramiko.SSHClient()ssh.set_missing_host_key…...
游戏引擎学习第146天
音高变化使得对齐读取变得不可能，我们可以支持循环声音了。 我们今天的目标是完成之前一段时间所做的音频代码。这个项目并不依赖任何引擎或库，而是一个教育项目，目的是展示从头到尾运行一个游戏所需要的全部代码。无论你对什么方面感兴趣&a…...
装饰器模式--RequestWrapper、请求流request无法被重复读取
目录 前言一、场景二、原因分析三、解决四、更多 前言 曾经遇见这么一段代码，能看出来是把request又重新包装了一下，核心信息都不会改变 后面了解到这叫 装饰器模式（Decorator Pattern） ：也称为包装模式(Wrapper Pat…...
【算法题】小鱼的航程
问题： 分析 分析题目，可以看出，给你一个开始的星期，再给一个总共天数，在这些天内，只有周六周日休息，其他全要游泳250公里。 那分支处理好啦 当星期为6时，需要消耗2天，…...
视频录像机视频通道是指什么
视频录像机的视频通道是指摄像机在监控矩阵或硬盘录像机设备上的视频输入的物理位置。 与摄像头数量关系：在视频监控系统中，有多少个摄像头就需要多少路视频通道，通道数量决定了视频录像机可接入摄像头的数量，一般硬盘录像机有4路…...
RISC-V医疗芯片工程师复合型转型的路径与策略
从RISC-V到医疗芯片：工程师复合型转型的路径与策略 一、引言 1.1 研究背景 在科技快速发展的当下，芯片技术已然成为推动各行业进步的核心驱动力之一。其中，RISC-V 架构作为芯片领域的新兴力量，正以其独特的优势迅速崛起，对整个芯片产业的格局产生着深远影响。RISC-V 架…...
《Gradio : AI awesome-demos》
《Gradio : AI awesome-demos》 This is a list of some wonderful demos & applications built with Gradio. Heres how to contribute yours! 🖊️ Natural language processing Demo name (link to demo)input type(s)output type(s)status badgeruDALL-ET…...