【14.HTML-移动端适配】
移动端适配
- 1 布局视口和视觉视口
- 1.1 设置移动端布局视口宽度
- 2 移动端适配方案
- 2.1 rem单位+动态html的font-size;
- 2.2 vw单位
- 2.3 rem和vw对比
- 2.4 flex的弹性布局
1 布局视口和视觉视口

1.1 设置移动端布局视口宽度
避免布局视口宽度默认980px带了的缩放问题,并且禁止用户缩放页面

2 移动端适配方案
2.1 rem单位+动态html的font-size;
rem 是 CSS3 中的一个相对长度单位,它表示相对于根元素(html 元素)的字体大小来计算长度。rem 的值不会受到父元素字体大小的影响,而始终是相对于根元素字体大小计算的。
可以直接使用lib-flexible库

html {font-size: 16px; /* 将根元素字体大小设置为16px */
}body {font-size: 1rem; /* 1rem 等于根元素字体大小,即16px */
}h1 {font-size: 2rem; /* 2rem 等于根元素字体大小的两倍,即32px */
}p {font-size: 0.875rem; /* 0.875rem 等于根元素字体大小的0.875倍,即14px */
}
2.2 vw单位
vw 是 CSS3 中的一个相对长度单位,它表示相对于视口宽度(viewport width)的百分比来计算长度。1vw 等于视口宽度的 1%。与其他相对长度单位(如 em 和 %)不同,vw 的值是基于视口宽度计算的,而不是基于父元素的宽度。
2.3 rem和vw对比
一般来说,如果要设置元素的宽度、高度等属性,应该优先考虑使用 vw 单位;如果要设置元素的字体大小、行高等属性,可以优先考虑使用 rem 单位。建议都使用vw.

2.4 flex的弹性布局
相关文章:
【14.HTML-移动端适配】
移动端适配 1 布局视口和视觉视口1.1 设置移动端布局视口宽度 2 移动端适配方案2.1 rem单位动态html的font-size;2.2 vw单位2.3 rem和vw对比2.4 flex的弹性布局 1 布局视口和视觉视口 1.1 设置移动端布局视口宽度 避免布局视口宽度默认980px带了的缩放问题,并且禁止…...
平衡二叉树旋转机制
概念 平衡二叉树的旋转机制是一种通过对树进行旋转操作来保持其平衡的方法。 分类 平衡二叉树的旋转机制包括两种基本类型的旋转:左旋和右旋,以及它们的组合。 左旋 左旋是将一个节点的右子节点旋转到它的位置上,同时将该节点移到其左侧&…...
深入浅出C++ ——C++11
文章目录 一、C11简介二、列表初始化二、声明四、范围for循环五、STL中的变化六、右值引用和移动语义1. 什么是左值?什么是左值引用?2. 左值引用与右值引用比较3. 右值引用使用场景和意义4. 完美转发 新的类功能默认成员函数类成员变量初始化defaultdele…...
智能座舱3.0阶段,看全球巨头如何打造更具“价值”的第三空间
面向中国这一全球最大的汽车电动化与智能化单一市场,作为全球第七大汽车技术供应商的FORVIA佛瑞亚集团开始全面发力。 在2023年上海国际车展上,FORVIA佛瑞亚携旗下佛吉亚与海拉一系列突破性技术和互动体验亮相,展示了对电气化与能源管理、安…...
【Linux】入门介绍
🌱博客主页:大寄一场. 🌱系列专栏:Linux 😘博客制作不易欢迎各位👍点赞⭐收藏➕关注 目录 前言 Linux背景介绍 1.发展史 UNIX发展的历史 Linux发展历史 2. 开源 3. 官网 4. 企业应用现状 5. 发行版…...
【Python】序列类型②-元组
文章目录 1.元组简介2.元组的定义2.1定义只有一个元素的元组 3.元组的下标访问4.元组的常用方法5.使用in判断是否存在元素6.多元赋值操作 1.元组简介 元组和列表一样可以存放多个,不同数据类型的元素 与列表最大的不同就是:列表是可变的,而元组不可变 2.元组的定义 元组的定义:…...
循环的数字
循环的数字 题目描述 你曾经因为看见一样的东西一遍又一遍地重复、循环而对电视节目感到厌烦么?好吧,虽然我并不关心电视节目的好坏,不过有时却也很像那样不断循环的数字。 让我们假定两个不同的正整数 ( n , m ) (n, m) (n,m) 是循环的&…...
MySQL查询之聚合函数查询
0. 数据源 student.sql文件。 /*Navicat Premium Data TransferSource Server : localhost_3306Source Server Type : MySQLSource Server Version : 80016Source Host : localhost:3306Source Schema : testdbTarget Server Type : MySQLTa…...
普通2本,去过字节外包,到现在年薪25W+的测试开发,我的2年转行心酸经历...
个人简介 我是一个普通二本大学机械专业毕业,17年毕业,19年转行,目前做IT行业的软件测试已经有3年多,职位是高级测试工程师,坐标上海… 我想现在我也有一点资格谈论关于转行这个话题;希望你在决定转行之前…...
util.callbackify
util.callbackify(original) 将 async 异步函数(或者一个返回值为 Promise 的函数)转换成遵循异常优先的回调风格的函数,例如将 (err, value) > ... 回调作为最后一个参数。 在回调函数中,第一个参数为拒绝的原因(如…...
解决使用CLIP模型时TypeError: Cannot handle this data type: (1, 1, 224, 224), |u1
想提供Huggingface的transformer库实现多模态模型CLIP的推断,结果报错 (myenv) rootd27d1ff1836c:/home/model_test# python3 CLIP.py ftfy or spacy is not installed using BERT BasicTokenizer instead of ftfy. Traceback (most recent call last): File “/hom…...
Mysql第二章 多表查询的操作
这里写自定义目录标题 一 外连接与内连接的概念sql99语法实现 默认是内连接sql99语法实现左外连接,把没有部门的员工也查出来sql99语法实现右外连接,把没有人的部门查出来sql99语法实现满外连接,mysql不支持这样写mysql中如果要实现满外连接的…...
ESP32-CAM:TinyML 图像分类——水果与蔬菜
目录 故事 硬件参数: 在 Arduino IDE 上安装 ESP32-Cam 使用 BLINK 测试电路板 测试无线网络 运行您的 Web 服务器 水果与蔬菜-图像分类 下载数据集 使用 Edge Impulse Studio 训练模型...
如何防止订单重复支付
想必大家对在线支付都不陌生,今天和大家聊聊如何防止订单重复支付。 看看订单支付流程 我们来看看,电商订单支付的简要流程: 订单钱包支付流程 从下单/计算开始: 下单/结算:这一步虽然不是直接的支付起点,但…...
不是那么快乐的五一
大家好,我是记得诚。 五一假期结束了,明天开始上班了。 这个假期没休息好,也没出去玩。 放假前一天,接到通知让加班。 第一天就去公司加班了,属实很难受,我心想如果别人有了出远门的安排,还…...
Maven命令和配置详解
Maven命令和配置详解 1. pom基本结构2. build基本结构3. Maven命令详解3.1 打包命令3.2 常用命令3.3 批量修改版本-父子pom4. Maven配置详解4.1 settings.xml4.2 项目内的maven工程结构Maven POM构建生命周期工程实践1. pom基本结构 <?xml versi...
P3029 [USACO11NOV]Cow Lineup S 双指针 单调队列
“五一”小长假来了趟上海,在倒数第二天终于有时间做了一会儿题目,A了之后过来写一篇题解 【问题描述】 农民约翰雇一个专业摄影师给他的部分牛拍照。由于约翰的牛有好多品种,他喜欢他的照片包含每个品种的至少一头牛。 约翰的牛都站在一条沿…...
数据结构与算法之链表: Leetcode 83. 删除排序链表中的重复元素 (Typescript版)
删除排序链表中的重复元素 https://leetcode.cn/problems/remove-duplicates-from-sorted-list/ 描述 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 示例 1 输入:head [1,1,2] 输出&…...
ubuntu16.04升级到20.04后报错 By not providing “FindEigen.cmake“
编译问题: CMake Error at modules/perception/lidar/CMakeLists.txt:14 (find_package): By not providing "FindEigen.cmake" in CMAKE_MODULE_PATH this project has asked CMake to find a package configuration file provided by "Eigen&…...
设计模式——模板方法模式
是什么? 在我们的实际开发中尝尝会遇到这种问题:在设计一个系统时知道了算法所需要的关键步骤,而且确定了这些步骤的执行顺序,但是某些步骤的具体实现还不知道,或者说某些步骤的实现与具体的环境相关,例如每…...
基于ROS的语音控制机器人(一):从零搭建多模态交互系统
1. 从零搭建ROS语音控制机器人的核心思路 第一次接触ROS机器人开发时,我被其分布式架构深深吸引。想象一下:你对着电脑说"前进",树莓派就能驱动小车移动;喊"打开摄像头",机器人立即开启视觉识别—…...
Alexa Skills Kit SDK SMAPI 集成:自动化技能管理和部署的完整流程
Alexa Skills Kit SDK SMAPI 集成:自动化技能管理和部署的完整流程 【免费下载链接】alexa-skills-kit-sdk-for-nodejs The Alexa Skills Kit SDK for Node.js helps you get a skill up and running quickly, letting you focus on skill logic instead of boilerp…...
突破微信设备限制:WeChatPad如何实现免Root双设备同时在线
突破微信设备限制:WeChatPad如何实现免Root双设备同时在线 【免费下载链接】WeChatPad 强制使用微信平板模式 项目地址: https://gitcode.com/gh_mirrors/we/WeChatPad 你是否曾因微信只能单设备登录而错失重要消息?是否渴望在手机和平板上同时接…...
太原理工大学Web开发历年真题解析:期末复习必备指南(附最新试卷)
太原理工大学Web开发核心考点深度剖析与高效复习方法论 Web开发课程期末备考的战略视角 又到了期末季,作为太原理工大学计算机相关专业的学生,面对Web开发这门实践性极强的课程,你是否还在为如何高效复习而焦虑?不同于传统理论课…...
Llama-3.2V-11B-cot设计稿理解效果:从UI草图到前端代码描述
Llama-3.2V-11B-cot设计稿理解效果:从UI草图到前端代码描述 最近在尝试一些新的AI工具时,我偶然接触到了Llama-3.2V-11B-cot这个模型。它有一个听起来挺有意思的能力:能“看懂”设计稿。作为一个经常在设计和开发之间做“翻译”的人…...
Qwen3-0.6B-FP8实战案例:为嵌入式系统开发提供代码生成与调试建议
Qwen3-0.6B-FP8实战案例:为嵌入式系统开发提供代码生成与调试建议 最近在折腾一个STM32的小项目,想用PWM调个呼吸灯,结果对着手册和寄存器配置了半天,不是时钟没配对就是占空比算错,一编译还报了一堆警告。相信不少搞…...
避坑指南:STM32磁编码器校准常见的5个错误及解决方案
STM32磁编码器校准实战:5个典型错误分析与高阶解决方案 磁编码器在步进电机控制系统中扮演着关键角色,而MT6816作为国产AMR技术代表芯片,其14位高精度输出为位置检测提供了可靠保障。但在实际校准过程中,开发者常会遇到CALI_Error…...
Telegram用户必看:Grok聊天机器人全功能实测与隐藏技巧大公开
Telegram用户必看:Grok聊天机器人全功能实测与隐藏技巧大公开 作为Telegram深度用户,你可能已经注意到聊天界面顶部多了一个新面孔——Grok聊天机器人。这款由xAI打造的AI助手正在悄然改变我们的通讯体验。不同于市面上大多数聊天机器人,Grok…...
【仅限首批内测用户开放】Polars 2.0清洗性能调优白皮书:含12个未公开API、3类CPU亲和性绑定策略
第一章:Polars 2.0大规模数据清洗技巧概览Polars 2.0 在性能、内存效率与API一致性上实现重大升级,为TB级结构化数据清洗提供了低延迟、高吞吐的原生解决方案。其基于Arrow 15的列式引擎、零拷贝切片能力及多线程LazyFrame执行计划优化,使复杂…...
OpenClaw自动化测试:基于Nanobot的持续集成方案
OpenClaw自动化测试:基于Nanobot的持续集成方案 1. 引言 在软件开发领域,测试环节往往是耗时最长、人力投入最大的阶段之一。传统的自动化测试脚本编写不仅需要专业的技术知识,还需要大量的维护成本。随着项目迭代速度加快,测试…...
