当前位置: 首页 > news >正文

【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 双指针 单调队列

“五一”小长假来了趟上海&#xff0c;在倒数第二天终于有时间做了一会儿题目&#xff0c;A了之后过来写一篇题解 【问题描述】 农民约翰雇一个专业摄影师给他的部分牛拍照。由于约翰的牛有好多品种&#xff0c;他喜欢他的照片包含每个品种的至少一头牛。 约翰的牛都站在一条沿…...

数据结构与算法之链表: Leetcode 83. 删除排序链表中的重复元素 (Typescript版)

删除排序链表中的重复元素 https://leetcode.cn/problems/remove-duplicates-from-sorted-list/ 描述 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 示例 1 输入&#xff1a;head [1,1,2] 输出&…...

ubuntu16.04升级到20.04后报错 By not providing “FindEigen.cmake“

编译问题&#xff1a; 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&…...

设计模式——模板方法模式

是什么&#xff1f; 在我们的实际开发中尝尝会遇到这种问题&#xff1a;在设计一个系统时知道了算法所需要的关键步骤&#xff0c;而且确定了这些步骤的执行顺序&#xff0c;但是某些步骤的具体实现还不知道&#xff0c;或者说某些步骤的实现与具体的环境相关&#xff0c;例如每…...

Android MQTT库在Android 13上的PendingIntent兼容性适配实战

1. 崩溃日志背后的PendingIntent适配危机 那天测试同事突然跑过来说&#xff1a;"你的MQTT推送在Android 13上炸了&#xff01;"我接过手机一看&#xff0c;果然闪退日志里赫然写着&#xff1a; java.lang.IllegalArgumentException: Targeting S (version 31 and …...

UNet架构优势解析:cv_unet_image-colorization语义特征与纹理保留实测

UNet架构优势解析&#xff1a;cv_unet_image-colorization语义特征与纹理保留实测 1. 引言&#xff1a;为什么UNet是图像上色的理想选择&#xff1f; 你有没有翻过家里的老相册&#xff1f;那些泛黄的黑白照片&#xff0c;承载着珍贵的记忆&#xff0c;却总让人觉得少了点什么…...

从BiomixQA到黄帝内经:聊聊2024年那些‘小而美’的垂直医学问答数据集

2024医学垂直问答数据集全景&#xff1a;从BiomixQA到黄帝内经的实战选型指南 当ChatGPT在通用领域大放异彩时&#xff0c;医学AI的战场正悄然转向那些"小而美"的垂直数据集。不同于通用语料的粗放式训练&#xff0c;专业医学问答需要精确到细胞级的语义理解——一个…...

如何高效管理微信读书笔记:终极免费工具wereader完全指南

如何高效管理微信读书笔记&#xff1a;终极免费工具wereader完全指南 【免费下载链接】wereader 一个功能全面的微信读书笔记助手 wereader 项目地址: https://gitcode.com/gh_mirrors/we/wereader 微信读书助手wereader是一款专为微信读书用户设计的免费开源工具&#…...

Buzz字幕长度优化:告别拥挤字幕,提升观看体验的智能解决方案

Buzz字幕长度优化&#xff1a;告别拥挤字幕&#xff0c;提升观看体验的智能解决方案 【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Trending/buz/buz…...

Z-Image-GGUF提示词工程实战:写出高质量描述生成惊艳图像

Z-Image-GGUF提示词工程实战&#xff1a;写出高质量描述生成惊艳图像 你是不是也遇到过这种情况&#xff1a;用同一个AI绘画模型&#xff0c;别人生成的图片美轮美奂&#xff0c;自己生成的却总差点意思&#xff1f;问题很可能出在“提示词”上。 提示词&#xff0c;就是你告…...

零基础掌握开源工具:3步实现群晖Photos功能强化

零基础掌握开源工具&#xff1a;3步实现群晖Photos功能强化 【免费下载链接】Synology_Photos_Face_Patch Synology Photos Facial Recognition Patch 项目地址: https://gitcode.com/gh_mirrors/sy/Synology_Photos_Face_Patch 当你面对海量照片却无法享受智能分类的便…...

CentOS8网络管理大变革:从network.service到NetworkManager的全面解析

CentOS8网络管理架构深度解析&#xff1a;从传统命令到NetworkManager的进化之路 如果你是一位长期使用CentOS的系统管理员&#xff0c;最近升级到CentOS8后可能会遇到一个令人困惑的问题&#xff1a;当你习惯性地输入systemctl restart network命令时&#xff0c;系统却无情地…...

XCOM 2模组管理终极解决方案:AML启动器效率革命指南

XCOM 2模组管理终极解决方案&#xff1a;AML启动器效率革命指南 【免费下载链接】xcom2-launcher The Alternative Mod Launcher (AML) is a replacement for the default game launchers from XCOM 2 and XCOM Chimera Squad. 项目地址: https://gitcode.com/gh_mirrors/xc/…...

终极指南:Windows免费倒计时神器Hourglass,5分钟从新手到高手

终极指南&#xff1a;Windows免费倒计时神器Hourglass&#xff0c;5分钟从新手到高手 【免费下载链接】hourglass The simple countdown timer for Windows. 项目地址: https://gitcode.com/gh_mirrors/ho/hourglass 还在为Windows系统找不到好用的倒计时工具而烦恼吗&a…...