如何通过rem实现移动端的适配？
一、rem、em、vw\vh的区别：
rem：参照HTML根元素的font-size
em：参照自己的font-size
vw/vh：将视口宽高平分100等份，数值就是所占比例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* rem参照HTML 根元素的font-size 1rem=font-size */.rem {/* margin-top是参照屏幕宽度的50% *//* margin-top: 50%; */width: 10rem;height: 10rem;background-color: yellowgreen;}/* em参照自己的font-size,如果自己没有就往上找, 最后数值是自己font-size的多少倍 *//* font-size:16px 20em= 20*16px= 320px */.em {width: 20em;height: 20em;background-color: plum;}/* 将视口宽高平分100等份,数值就是所占比例 */.vw {width: 20vw;height: 20vh;background-color: pink;}
</style><body><div class="rem">rem</div><div class="em">em</div><div class="vw">vw/vh</div>
</body></html>二、媒体查询语法
/* 媒体查询的语法 */@media mediaType and (media feather) {选择器 {属性名：属性值}}/* 多个条件用and连接 */@media mediaType and (media feather) and (media feather) {选择器 {属性名：属性值}}1.mediaType设备类型：
all:所有的多媒体设备
print:打印机或打印预览
screen：电脑屏幕、平板电脑、智能手机等
speech：屏幕阅读器等发声设备2.media feather:媒体特性表达式
width：浏览器的宽度
height:浏览器的高度
max-width：最大宽度
min-width:最小宽度
device-width:设备宽度
device-height:设备高度
max-device-width:最大设备宽度
min-device-width:最小设备宽度
3.操作符and：与、和
not: 用来排除掉某些特定的设备的，比如 @media not print（非打印设备)
only: 用来定某种特别的媒体类型，比如 @media only screen（只能在screen设备使用）
三、通过媒体查询实现rem适配
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>@media screen and (max-width:320px) {html {font-size: 16px;}}@media screen and (min-width:320px) and (max-width:375px) {html {font-size: 18px;}}@media screen and (min-width:375px) {html {font-size: 20px;}}.box {width: 20rem;height: 20rem;background-color: plum;}
</style><body><div class="box">盒子</div>
</body></html>相关文章：
如何通过rem实现移动端的适配？
一、rem、em、vw\vh的区别： rem：参照HTML根元素的font-size em：参照自己的font-size vw/vh：将视口宽高平分100等份，数值就是所占比例 <!DOCTYPE html> <html lang"en"><head><meta…...
【论文阅读】-姿态识别
记录论文阅读，希望能了解我方向的邻域前沿吧 粗读 第一篇 ATTEND TO WHO YOU ARE: SUPERVISING SELF-ATTENTION FOR KEYPOINT DETECTION AND INSTANCE-AWARE ASSOCIATION 翻译：https://editor.csdn.net/md?not_checkout1&spm1001.2014.3001.5352…...
3.1 模拟栈+表达式求值
模拟栈 题目链接 栈的数组模拟非常简单，不详细描述 设置一个指针指向栈顶第一个元素即可 STL中stack实现已经更新在STL_Stack #include<iostream> #include<string>using namespace std;const int N1e51; int m; string s; int stack[N]; int p;//指针…...
【Python语言基础】——Python 创建表
Python语言基础——Python 创建表 文章目录 Python语言基础——Python 创建表一、Python 创建表一、Python 创建表 创建表 如需在 MySQL 中创建表，请使用 “CREATE TABLE” 语句。 请确保在创建连接时定义数据库的名称。 实例 创建表 “customers”： import mysql.connector…...
外贸建站，为什么别人的询盘更多更精准？
大多企业进行外贸建站的目的就是想要获得更多的精准询盘，但是具体该如何做，大多企业都没有方向，要么就是在网上看各种不系统的文章学着操作，要么就找个建站公司做好网站就不管了，而最终结果都不甚理想。那么怎样才能让…...
Gateway集成Netty服务
Gateway和Netty都有盲区的感觉； 一、Netty简介 Netty是一个异步的，事件驱动的网络应用框架，用以快速开发高可靠、高性能的网络应用程序。 传输服务：提供网络传输能力的管理； 协议支持：支持常见的数据传输…...
SpringMVC控制层private方法中出现注入的service对象空指针异常
一、现象 SpringMVC中controller里的private接口中注入的service层的bean为null，而同一个controller中访问修饰符为public和protected的方法不会出现这样的问题。 controller中的方法被AOP进行了代理，普通Controller如果没有AOP，private方法…...
【Unity】P4 脚本文件（基础）
Unity脚本文件（基础）适配的C#代码编辑器如何添加一个脚本文件获取蘑菇当前位置基础代码改变物体位置帧与帧更新前言 上一篇博文主要围绕Unity Inspector部分，围绕组件，资源文件，父子节点部分做介绍。 链接：…...
（2023版）零基础入门网络安全/Web安全，收藏这一篇就够了
由于我之前写了不少网络安全技术相关的文章和回答，不少读者朋友知道我是从事网络安全相关的工作，于是经常有人私信问我： 我刚入门网络安全，该怎么学？ 要学哪些东西？ 有哪些方向？ 怎么选&#x…...
Vue3电商项目实战-登录模块2【05-登录-表单校验、06-登录-消息提示组件封装、07-登录-账户登录、08-登录-手机号登录、09-退出登录】
文章目录05-登录-表单校验06-登录-消息提示组件封装07-登录-账户登录08-登录-手机号登录09-退出登录05-登录-表单校验 文档：https://vee-validate.logaretm.com/v4/ 支持vue3.0 第一步：安装 执行命令 npm i vee-validate4.0.3 第二步：导入 …...
Python 中都有哪些常见的错误和异常？
本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！ 作者| 慕课网精英讲师 朱广蔚 Python 程序的执行过程中，当发生错误时会引起一个事件，该事件被称为异常。例如： 如果程…...
51单片机-1
1，单片机内部集成了CPU，RAM，ROM，定时器，中断系统，通讯接口等一系列电脑的常用硬件功能。单片机和计算机相比，单片机是一个袖珍版计算机 2，单片机里有中央处理器（CPU&…...
【Azure 架构师学习笔记】-Azure Data Factory (4)-触发器详解-事件触发器
本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Data Factory】系列。 接上文【Azure 架构师学习笔记】-Azure Data Factory (3)-触发器详解-翻转窗口 前言 事件触发指的是存储事件，所以在新版的ADF 中，已经明确了是“存储事件”，…...
【项目设计】高并发内存池(三)[CentralCache的实现]
🎇C学习历程：入门 博客主页：一起去看日落吗持续分享博主的C学习历程博主的能力有限，出现错误希望大家不吝赐教分享给大家一句我很喜欢的话： 也许你现在做的事情，暂时看不到成果，但不要忘记&…...
2023年，35岁测试工程师只能被“优化裁员”吗？肯定不是····
国内的互联网行业发展较快，所以造成了技术研发类员工工作强度比较大，同时技术的快速更新又需要员工不断的学习新的技术。因此淘汰率也比较高，超过35岁的基层研发类员工，往往因为家庭原因、身体原因，比较难以跟得上工作…...
gitlab部署使用，jenkins部署使用
gitlab部署使用，jenkins部署使用在线安装gitlab下载gitlab安装gitlab使用gitlab设置中文修改管理员密码创建组,创建项目,创建用户jenkins下载jenkins安装jenkin使用jenkins更改管理员密码配置拉取代码配置登录gitlab拉取代码的账号密码配置项目配置gitlab仓库配置构…...
从零开始的机械臂yolov5抓取gazebo仿真（环境搭建篇下）
sunday功能包使用介绍以及开源 sunday我给自己机械臂的命名，原型是innfos的gluon机械臂。通过sw模型文件转urdf。Sunday项目主要由六个功能包sunday_description、sunday_gazebo、sunday_moveit_config、yolov5_ros、vacuum_plugin、realsense_ros_gazebo组成&…...
GCC编译器 MinGW的下载安装使用教程
哎 总所周知 gcc可以用来编译C 和C。在linux广泛应用，那么window怎么使用gcc呢。就要用到gcc的window工具----MInGW，安装好之后，直接可以在windows的dos界面编译。下面讲解安装使用过程。1.官网下载MinGW - Minimalist GNU for Windows downl…...
【项目实战】SpringMVC配置全局属性，是实现WebMvcConfigurer接口，还是直接继承WebMvcConfigurationSupport类？
一、说明 官方推荐以下两种方式来配置全局的SpringMVC的相关属性 方式一：实现WebMvcConfigurer接口（推荐）方式二：直接继承WebMvcConfigurationSupport类。介绍一下两者区别吧。 二、 WebMvcConfigurer介绍 WebMvcConfigurer是一个接口，用于配置全局的SpringMVC的相关属…...
房产营销、地产中介如何高效低成本获客？
数字化对企业而言，机遇和挑战并存。房产企业可借助数字化加强日益扩大的业务规模和业务领域管理，以提升管理效率，降低管理难度；基于数字化技术加强客户的服务体验，进而收集多业态客户和场景数据，拓展创新业…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...