如何通过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的相关属…...
房产营销、地产中介如何高效低成本获客？
数字化对企业而言，机遇和挑战并存。房产企业可借助数字化加强日益扩大的业务规模和业务领域管理，以提升管理效率，降低管理难度；基于数字化技术加强客户的服务体验，进而收集多业态客户和场景数据，拓展创新业…...
基于GPT-4与Neo4j构建智能推荐聊天机器人：从原理到实践
1. 项目概述：一个能“读懂”并“修改”数据库的智能聊天机器人 最近在捣鼓一个挺有意思的开源项目，叫 NeoGPT-Recommender 。简单来说，它不是一个普通的聊天机器人，而是一个能真正理解你、并基于你的喜好动态更新知识库的智能助…...
【Midjourney Tempera风格终极指南】：20年AI绘画专家亲授3大参数黄金配比与5类易踩翻车点
更多请点击： https://intelliparadigm.com 第一章：Tempera风格的本质解构与历史溯源 Tempera（蛋彩画）作为一种古老而精密的绘画媒介，其技术逻辑与现代前端渲染范式存在深层隐喻关联——尤其在“分层合成”“介质绑定”…...
Java 程序员第 2 阶段：精通 SpringBoot 整合大模型，快速搭建基础服务
前言上一阶段我们掌握了原生 API 调用，但在大规模生产环境中，使用专业的 Java 框架能大幅提升开发效率。SpringAI 和 LangChain4j 是 Java 生态中最主流的大模型集成框架。本篇文章将手把手带你精通 SpringBoot 整合大模型，快速搭建企业级 AI…...
PaspberryPi推流
1. 创建启动脚本sudo nano /usr/local/bin/rtsp-stream.sh添加内容：#!/bin/bash# RTSP 音视频推流服务脚本 # 适配 Raspberry Pi 3B Camera Module USB 麦克风# 配置项 WIDTH1280 HEIGHT720 FRAMERATE15 VIDEO_BITRATE2000000 AUDIO_DEVICE"hw:1,0" …...
如何在Windows上快速安装iPhone网络共享驱动：3分钟终极解决方案
如何在Windows上快速安装iPhone网络共享驱动：3分钟终极解决方案 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.c…...
PostgreSQL COPY命令实战：从CSV导入到导出的完整数据流处理
1. 为什么你需要掌握COPY命令 如果你经常需要把Excel表格或CSV文件的数据导入PostgreSQL数据库，或者反过来把数据库查询结果导出成文件，那么COPY命令就是你的瑞士军刀。我见过太多人还在用Python脚本逐行读写CSV，不仅效率低，代码还…...
Claude集成Spring Boot全链路实践：从零搭建智能API网关的7步标准化流程
更多请点击： https://intelliparadigm.com 第一章：Claude集成Spring Boot全链路实践：从零搭建智能API网关的7步标准化流程 环境准备与依赖声明 确保 JDK 17、Maven 3.8 和 Spring Boot 3.2.x 基础环境就绪。在 pom.xml 中引入 Claude 官方…...
联邦学习与RAG融合：构建隐私保护的分布式智能问答系统
1. 项目概述：当联邦学习遇上检索增强生成最近在折腾一个挺有意思的开源项目，叫fed-rag，来自 Vector Institute。光看名字，老司机们大概就能猜出个七七八八了：这玩意儿是把联邦学习和检索增强生成给揉到一块儿去了。我花…...
Go语言轻量级Web框架Tapestry：高性能路由与中间件设计实战
1. 项目概述与核心价值最近在开源社区里，一个名为Tapestry的项目引起了我的注意。它来自开发者 NatsuFox，定位是一个“轻量级、高性能的 Web 框架”。说实话，现在各种语言的 Web 框架多如牛毛，从 Python 的 Flask、Django…...
为什么你的ChatGPT生成帖文零互动？揭秘Instagram 2024算法对AI内容的3重隐性过滤机制
更多请点击： https://intelliparadigm.com 第一章：为什么你的ChatGPT生成帖文零互动？揭秘Instagram 2024算法对AI内容的3重隐性过滤机制 Instagram 2024年Q2核心算法更新引入了「人类意图验证层（HIVL）」，该…...