如何通过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的相关属…...
房产营销、地产中介如何高效低成本获客？
数字化对企业而言，机遇和挑战并存。房产企业可借助数字化加强日益扩大的业务规模和业务领域管理，以提升管理效率，降低管理难度；基于数字化技术加强客户的服务体验，进而收集多业态客户和场景数据，拓展创新业…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型（算法、数据分析、机器学习等）不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
第14节 Node.js 全局对象
JavaScript 中有一个特殊的对象，称为全局对象（Global Object），它及其所有属性都可以在程序的任何地方访问，即全局变量。 在浏览器 JavaScript 中，通常 window 是全局对象， 而 Node.js 中的全局…...