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

【CSS】移动端适配

news 2026/5/22 4:27:02

移动端适配怎么做？

适配的目的是在屏幕大小不同的终端设备拥有统一的界面，让拥有更大屏幕的终端展示更多的内容。

meta viewport (视口)

移动端初始视口的大小默认是980px，因为世界上绝大多数PC网页的版心宽度为980px ，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。

为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。这里的device-width告诉浏览器，将视口的宽度设置为设备宽度(这个宽度是人为预设的,不设的话就是980px)。

属性含义：

  • initial-scale：第一次进入页面的初始比例
  • minimum-scale：允许缩小最小比例
  • maximum-scale：允许放大最大比例
  • user-scalable：允许使用者缩放， 1 or 0 (yes or no)
<metaname="viewport"content="width=device-width, initial-scale=1.0"
>

图片适配

img {max-width: 100%;}此时图片会自动缩放,同时图片最大显示为其自身的100% (即最大只可以显示为自身那么大)。

为什么不用 img{width: 100%;}？当容器大于图片宽度时，图片会拉伸变形变模糊。

媒体查询

针对不用的设备提前为网页设定各种CSS样式。CSS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件语法举例@media screen and (min-width:1200px){ body{background-color: red;}当屏幕宽度大于1200px时，背景色变为红色。

动态 rem 方案

和媒体查询配合，实现响应式布局。

px、em、rem 有什么不同？

px是pixel (像素) ，是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px。

em是一个相对大小。相对于父元素font-size的百分比大小。

rem是相对于根元素的font-size。

<style>* {padding: 0;margin: 0;}.w-550px {width: 550rem;height: 100px;background-color: rgb(113, 230, 191);}.w-750px {width: 750rem;height: 100px;background-color: rgb(239, 198, 94);}
</style><body><div class="w-550px"></div><div class="w-750px"></div><script>function setRem() {const scale = document.documentElement.clientWidth / 750document.documentElement.style.fontSize = scale + 'px'}setRem()window.onresize = setRem</script>
</body>

在这里插入图片描述

相关文章：

【CSS】移动端适配

移动端适配怎么做&#xff1f; 适配的目的是在屏幕大小不同的终端设备拥有统一的界面&#xff0c;让拥有更大屏幕的终端展示更多的内容。 meta viewport (视口) 移动端初始视口的大小默认是980px&#xff0c;因为世界上绝大多数PC网页的版心宽度为980px &#xff0c;如果网页…...

编程日记 2024/2/2 18:49:45

DFS剪枝算法经典题目-挑选

4954. 挑选 - AcWing题库 给定一个包含 n 个正整数 a1,a2,…,an的集合。 集合中可能存在数值相同的元素。 请你从集合中挑选一些元素&#xff0c;要求同时满足以下所有条件&#xff1a; 被选中元素不少于 2 个。所有被选中元素之和不小于 l 且不大于 r。所有被选中元素之中最大…...

编程日记 2024/2/2 18:47:43

考研经验总结——考试期间

文章目录 一、订房二、看考场三、休息四、考前带宾馆的书五、安全 一、订房 我刚刚看了看&#xff0c;是9.10号订的酒店。你们可以提前向学长学姐打听你的考场在哪个学校&#xff08;徐州的考生&#xff0c;考省外的学校是在矿大考试&#xff0c;考省内的学校是在江师大&#…...

编程日记 2024/2/2 18:45:41

vue3 源码解析（6）— lifecycle 生命周期的实现

前言 对于 vue3 的生命周期&#xff0c;我们经常性会去疑问&#xff0c;生命周期有哪些呢&#xff0c;它是怎么去实现的&#xff0c; 又是什么时候调用的。 vue3 生命周期有哪些 下面这个表格列出了所有选项式api生命周期钩子和组合式api生命周期钩子&#xff0c;以及他们的…...

编程日记 2024/2/2 18:41:38

three.js CSS2DRenderer、CSS2DObject渲染HTML标签

有空的老铁关注一下我的抖音&#xff1a; 效果&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red;position: relative;"><…...

编程日记 2024/2/2 18:30:29

SECS/GEM300和半导体e84控制器

SECS&#xff08;SEMI EQUIPMENT COMMUNICATIONS STANDARD 2&#xff09;半导体设备通讯标准 GEM&#xff08;Generic Equipment Model&#xff09;定义了Fab中各个场景下设备行为及其所使用SECS消息。 GEM300也称为300mm标准&#xff0c;FAB是12寸设备的处理作业规范。主要包…...

编程日记 2024/2/2 18:28:27

k8s二进制及负载均衡集群部署详解

目录 常见部署方式 二进制部署流程 环境准备 操作系统初始化配置 关闭防火墙 配置SELinux 关闭SWAP 根据规划设置主机名 在master添加hosts&#xff0c;便于主机名解析 调整内核参数 配置时间同步 部署docker引擎 在所有node节点部署docker引擎 部署etcd集群 签发…...

编程日记 2024/2/2 18:25:24

【Django开发】0到1开发美多商城项目第3篇：用户注册业务实现（附代码，已分享）

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目&#xff08;4.0版本&#xff09;含代码和文档。功能包括前后端不分离&#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现前后端…...

编程日记 2024/2/2 18:23:23

免费的ppt网站分享

前言 相信大学生们深有体会&#xff0c;对于学校而言&#xff0c;好像是任何活动都需要我们做ppt&#xff0c;当你拿着自己辛苦做的ppt去展示现场的时候&#xff0c;你看到别人的ppt比你的还好&#xff0c;此时心情就是毙&#xff0c;当你知道人家不过是仅仅的1个小时不到就完成…...

编程日记 2024/2/2 18:17:17

基于Transformer结构的扩散模型综述

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…...

编程日记 2024/2/2 18:15:14

POI操作word表格，添加单元格，单元格对齐方法（不必合并单元格）

添加单元格&#xff0c;直接对row进行create新的cell&#xff0c;则会导致新创建的单元格与前面的单元格不对齐的现象。 //表格信息XWPFTable table doc.createTable();table.setWidth("100%");//第一行XWPFTableRow row0table.getRow(0);XWPFTableCell cell00row0.…...

编程日记 2024/2/2 18:10:08

maven代码规范检查（checkstyle、findbugs）

maven代码规范检查 前言一、使用checkstyle插件1. maven-checkstyle-plugin 介绍2. 接入方式3. 如何排除某个类、包下面的文件不进行检查使用suppressionsLocation 4. 如何关闭 二、使用findbugs插件1.findbugs-maven-plugin介绍2. 接入方式3. 如何排除某个类、包下面的文件不进…...

编程日记 2024/2/2 18:09:07

妙用Java反射，让代码更加优雅

最近在改公司项目bug&#xff0c;需要修改别人的代码。在读别人的源码时感觉到反射真的是能够极大的提高代码的优雅性&#xff0c;在某些特定场景能极大的简化代码的编写。因此写了这篇文章用以记录分享。 我们先还原一下场景&#xff0c;在做数据展示的时候&#xff0c;需要处…...

编程日记 2024/2/2 18:08:06

实习日志10

1.用户信息 1.1.在用户管理中编辑用户信息 1.2.绑定公司id 1.3.显示在页面 2.修改识别逻辑 2.1.分析 先识别&#xff0c;再判断&#xff0c;清空键把识别结果清空 2.2.写码 修改了发票识别逻辑&#xff0c;略... 3.接高拍仪 3.1.js引入报错 分析&#xff1a; 遇到的错误…...

编程日记 2024/2/2 18:06:04

配置alias（设置别名@）

Vite配置alias需要两步进行&#xff08;TS项目&#xff09; 1、修改vite.config.ts&#xff08;让程序支持&#xff09;2、修改tsconfig.json&#xff08;让编辑器支持&#xff09;修改vite.config.ts import { defineConfig } from vite import path from path ​ function…...

编程日记 2024/2/2 18:02:00

【动态规划】【数学】1388. 3n 块披萨

作者推荐 【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 本文涉及知识点 动态规划汇总 LeetCode1388 3n 块披萨 给你一个披萨&#xff0c;它由 3n 块不同大小的部分组成&#xff0c;现在你和你的朋友们需要按照如下规则来分披萨&#xff1a; 你挑选 任…...

编程日记 2024/2/2 18:00:59

CS144--Chapter0--wsl2+docker环境搭建

我的笔记本配置 荣耀magicbook16&#xff0c;容量是500G&#xff0c;芯片是R7-5800 由于笔记本容量较小&#xff0c;因此考虑这个方案&#xff0c;对于台式机用户&#xff0c;建议可以直接用虚拟机或者双系统。 前言 斯坦福官网给出的方法是用他们的镜像&#xff08;基于Ubu…...

编程日记 2024/2/2 17:56:56

MGRE实验报告二

实验要求&#xff1a; 实验预览图&#xff1a; 实验分析&#xff1a; 1、对R1-R5配置IP地址&#xff0c;同时R1-R5每个路由器各有一个环回 2.1、对R1、R3、R4路由器开启虚拟接口1&#xff0c;分别配置隧道IP、接口封装协议&#xff0c;接口类型、定义封装源、开启伪广播功能&…...

编程日记 2024/2/2 17:52:53

算法设计与分析实验：最短路径算法

一、网络延迟时间 力扣第743题 本题采用最短路径的思想进行求解 1.1 具体思路 &#xff08;1&#xff09;使用邻接表表示有向图&#xff1a;首先&#xff0c;我们可以使用邻接表来表示有向图。邻接表是一种数据结构&#xff0c;用于表示图中顶点的相邻关系。在这个问题中&am…...

编程日记 2024/2/2 17:50:51

共用体与枚举法，链表的学习

结构体注意事项&#xff1a; 1.结构体类型可以定义在main函数里面&#xff0c;但是此时的作用域就被限定在该函数中 2.结构体的的的定义的形式&#xff1a;a.先定义类型&#xff0c;后定义变量-----struct stu s b.定义类型的同时&#xff0c;定义了变量&#xff1a;struct…...

编程日记 2024/2/2 17:47:48

SpringBoot+Vue房屋买卖平台源码+论文

代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 分享万套开题报告任务书答辩PPT模板 作者完整代码目录供你选择&#xff1a; 《SpringBoot网站项目》1800套 《SSM网站项目》1500套 《小程序项目》1600套 《APP项目》1500套 《Python网站项目》…...

编程新知 2026/5/22 4:15:02

LangGraph与智能体：当AI学会了“思考图谱”，离真正干活还有多远？

你有没有发现&#xff1a;现在的AI聊天工具虽然能回答五花八门的问题&#xff0c;可一旦交给它稍微复杂点的任务——比如“订一张去上海的机票&#xff0c;顺便查查那边的天气&#xff0c;再帮我写份会议纪要”——它就手忙脚乱&#xff0c;要么忘记前面的信息&#xff0c;要么…...

编程新知 2026/5/22 1:44:23

1987年7月14日晚上19-21点出生性格、运势和命运

1987年6月28日&#xff0c;距离二十四节气中的“小暑”&#xff08;通常在7月6-8日&#xff09;约8-10天。小暑意为“天气开始炎热但未到极致”&#xff0c;是盛夏的序曲。这个时节的哲学&#xff0c;与个人成长有着奇妙的呼应。性格的“小暑特质”&#xff1a;温润与韧性 小暑…...

编程新知 2026/5/22 1:05:10

大模型终于看懂立体几何！中科院联合阿里提出统一形式语言，刷新解析SOTA

论文详细解读&#xff1a;使用统一形式化语言的平面与立体几何图形解析 论文标题&#xff1a;Geoparsing: Diagram Parsing for Plane and Solid Geometry with a Unified Formal Language作者机构&#xff1a;中国科学院自动化研究所&#xff08;CASIA&#xff09;、中国科学…...

编程新知 2026/5/22 1:00:34

一文讲透｜盘点2026年标杆级的AI论文网站

一天写完毕业论文在2026年已不再是天方夜谭。以下是2026年最炸裂、实测能大幅提速的AI论文网站神器&#xff0c;覆盖全流程生成、文献处理、降重润色、格式排版四大核心场景&#xff0c;帮你高效搞定毕业论文。 一、全流程王者&#xff1a;一站式搞定论文全链路&#xff08;一天…...

编程新知 2026/5/22 0:41:21

chatgpt-web-midjourney-proxy的Tauri桌面应用：跨平台AI客户端构建终极指南

chatgpt-web-midjourney-proxy的Tauri桌面应用&#xff1a;跨平台AI客户端构建终极指南 想要在本地轻松体验ChatGPT、Midjourney和GPTs的强大功能吗&#xff1f;chatgpt-web-midjourney-proxy项目的Tauri桌面应用为你提供了完美的解决方案&#xff01;这款跨平台AI客户端让AI助…...

编程新知 2026/5/21 23:36:52

如何用 polyfill-iconv 处理中文编码？GBK、BIG5、UTF-8 转换终极指南

如何用 polyfill-iconv 处理中文编码&#xff1f;GBK、BIG5、UTF-8 转换终极指南 【免费下载链接】polyfill-iconv This component provides a native PHP implementation of the php.net/iconv functions. 项目地址: https://gitcode.com/gh_mirrors/po/polyfill-iconv …...

编程新知 2026/5/21 23:24:41

第11章:故障诊断与处理

第11章:故障诊断与处理 11.1 常见故障类型与原因 集群级故障 故障类型 症状 常见原因 集群Red 存在未分配的主分片 节点故障、磁盘满、分片损坏 集群Yellow 存在未分配的副本分片 节点不足、磁盘满、副本数过多 集群脑裂 多个Master节点 网络分区、Master配置错误 集群无响应…...

编程新知 2026/5/21 21:10:05

苏姿丰来华，AMD能否借中国市场突破英伟达生态封锁？

苏姿丰访华与AMD战略布局黄仁勋走后第四天&#xff0c;苏姿丰来到上海。上周&#xff0c;黄仁勋在最后一刻挤进特朗普访华队伍&#xff0c;想把英伟达重新带回中国。但他离开北京后&#xff0c;随行企业家很多拿到大单&#xff0c;H200在中国落地仍无明确说法。紧接着&#xff…...

编程新知 2026/5/21 20:39:33

计算机网络知识点全面总结（有这一篇就够了！！！）

计算机网络知识点全面总结&#xff08;有这一篇就够了&#xff01;&#xff01;&#xff01;&#xff09; 一、计算机网络概述 1.1 计算机网络的分类 按照网络的作用范围&#xff1a;广域网&#xff08;WAN&#xff09;、城域网&#xff08;MAN&#xff09;、局域网&#xff…...

编程新知 2026/5/21 19:40:26