让网页自适应各种设备技巧集合总结

文章目录

  • 一、使用流式布局
  • 二、使用媒体查询
  • 三、使用REM或EM单位
  • 四、使用Flexbox布局
  • 五、图片自适应


一、使用流式布局

流式布局是一种相对单位的布局方式,它使用相对于视口宽度的百分比来定义元素的尺寸和位置,从而使得页面能够根据不同的屏幕尺寸进行调整。例如,将容器的宽度设置为百分比值,而不是固定的像素值,可以让页面在不同设备上自动调整布局。

.container {width: 80%; /* 相对于父元素宽度的80% */margin: 0 auto; /* 居中 */
}

二、使用媒体查询

媒体查询是CSS3的一个重要特性,它允许根据设备的特性(如宽度、高度、屏幕方向等)来应用不同的样式。通过使用媒体查询,我们可以针对不同的屏幕尺寸和设备类型提供定制的样式。

/* 当视口宽度小于等于600px时应用的样式 */
@media screen and (max-width: 600px) {.container {width: 100%; /* 容器宽度100% */}
}

三、使用REM或EM单位

相对单位(如REM和EM)可以根据根元素或父元素的字体大小来调整元素的尺寸,从而实现相对于设备屏幕的自适应。通过设置根元素的字体大小为相对值,可以确保页面中的所有元素都根据屏幕尺寸进行缩放。

html {font-size: 16px; /* 设置根元素字体大小 */
}
.container {width: 30rem; /* 相对于根元素字体大小的30倍 */
}

四、使用Flexbox布局

Flexbox是一种强大的布局模型,它可以简化网页布局,并且能够很好地适应不同的屏幕尺寸和设备方向。通过使用Flexbox,我们可以轻松地创建响应式布局,使得页面上的元素能够自动调整位置和大小。

.container {display: flex; /* 设置容器为Flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

五、图片自适应

在移动设备上,图片可能会因为尺寸过大而导致页面加载缓慢。为了确保图片能够在各种设备上都能够自适应,我们可以使用max-width: 100%来限制图片的最大宽度,同时保持其高度的比例。

img {max-width: 100%; /* 图片最大宽度为100% */height: auto; /* 保持图片高度自适应 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/827755.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图像处理之模板匹配(C++)

图像处理之模板匹配(C) 文章目录 图像处理之模板匹配(C)前言一、基于灰度的模板匹配1.原理2.代码实现3.结果展示 总结 前言 模板匹配的算法包括基于灰度的匹配、基于特征的匹配、基于组件的匹配、基于相关性的匹配以及局部变形匹…

第48期|GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区,集成了生成预训练Transformer(GPT)、人工智能生成内容(AIGC)以及大语言模型(LLM)等安全领域应用的知识。在这里,您可以找…

Linux--内核移植(二)移植流程及驱动修改

本文来总结一下如何将 NXP 官方提供的 Linux 内核移植到正点原子的 I.MX6U-ALPHA 开发板上。 一、官方开发板内核测试 NXP 提供的 Linux 源码肯定是可以在自己的 I.MX6ULL EVK 开发板上运行下去的,所以我们肯定是以 I.MX6ULL EVK 开发板为参考&#xff0…

的记忆:pandas(实在会忘记,就看作是一个 Excel 表格,或者是 SQL 表,或者是字典的字典。)

pandas 是一个开源的 Python 数据分析库,它提供了快速、灵活和富有表现力的数据结构,旨在使“关系”或“标记”数据的“快速分析、清洗和转换”变得既简单又直观。pandas 非常适合于数据清洗和转换、数据分析和建模等任务。以下是 pandas 的基本概念和主…

简化图卷积 笔记

1 Title Simplifying Graph Convolutional Networks(Felix Wu、Tianyi Zhang、Amauri Holanda de、 Souza Jr、Christopher Fifty、Tao Yu、Kilian Q. Weinberger)【ICML 2019】 2 Conclusion This paper proposes a simplified graph convolutional m…

第100+6步 ChatGPT文献复现:ARIMAX预测新冠

基于WIN10的64位系统演示 一、写在前面 我们继续来解读ARIMAX模型文章,这一轮带来的是: 《PLoS One》杂志的2022年一篇题目为《A data-driven eXtreme gradient boosting machine learning model to predict COVID-19 transmission with meteorologic…

ajax使用案例

1.index.jsp页面&#xff1a; 下边是采用JavaScript的ajax发出异步请求。 <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8"%> <%String basePath request.getScheme()"://" request.ge…

【docker】拉取人大金仓KingbaseES数据库镜像速度很慢问题

作为一种新兴的虚拟化方式&#xff0c;Docker 跟传统的虚拟化方式相比具有众多的优势。 对于学习新技术、快速搭建实验环境等是很不错的选择。优势大致总结如下&#xff1a; 1.镜像拉取速度对比 速度前后对比&#xff0c;提升10倍不止&#xff0c;很快将镜像文件下载至本地。 …

探索设计模式的魅力:主从模式与AI大模型的结合-开启机器学习新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索主从模式与AI大模型之旅✨ &#x1f31f;Hey, tech enthusiasts! 你是否还在追…

蓝桥杯:日期问题(我的绝望题)

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;每日一练 &#x1f337;追光的人&#xff0c;终会万丈光芒 目录 前言&#xff1a; &#x1f337;1.问题描述&#xff1a; 1.问题描述&#xff1a; 2.输入格式&#xff1a; 3.输出格式&#…

IP组播简介

定义 作为IP传输三种方式之一&#xff0c;IP组播通信指的是IP报文从一个源发出&#xff0c;被转发到一组特定的接收者。相较于传统的单播和广播&#xff0c;IP组播可以有效地节约网络带宽、降低网络负载&#xff0c;避免广播堵塞带来的诸如摄像头花屏&#xff0c;视频马赛克等…

【数据结构(邓俊辉)学习笔记】向量03——常规向量

文章目录 0.概述1.元素访问2.置乱器3.判等器与比较器4.无序查找4.1 判等器4.2 顺序查找4.3 实现4.4 复杂度 5. 插入5.1 算法实现5.2 复杂度分析 6. 删除6.1 区间删除6.2 单元删除6.3 复杂度 7. 唯一化7.1 实现7.2 正确性7.3 复杂度 8. 遍历8.1 实现8.2 复杂度 9. 总结 0.概述 …

Pycharm代码规范与代码格式化插件安装

给大家分享两个PyCharm编辑器的插件&#xff0c;分别是pylint与autopep8&#xff0c;主要用来提高我们在使用python进行自动化测试编写以及性能测试脚本编写过程中的代码质量、可读性与美观性。 pylint&#xff1a; ● 代码检查工具&#xff1a;它可以帮助检查代码中的错误、…

Java常见面试题总结

文章目录 1. 什么是线程和进程?2. 请简要描述线程与进程的关系,区别及优缺点&#xff1f;3. 什么是堆和方法区&#xff1f;4. 并发与并行的区别5. 同步和异步的区别6.为什么要使用多线程? 优点&#xff1f;&#xff08;重要&#xff09;7. 使用多线程可能带来什么问题?8. 如…

LT1931

这份文件是关于LT1931和LT1931A两款DC/DC转换器的详细技术手册&#xff0c;由凌特公司&#xff08;Linear Technology&#xff09;提供。以下是该文档的核心内容概要&#xff1a; 产品特点&#xff1a; 高功率转换器&#xff1a;LT1931/LT1931A是高功率SOT-23封装的电流模式负…

视频滚动字幕一键批量轻松添加,解锁高效字幕编辑,提升视频质量与观众体验

视频已成为我们获取信息、娱乐休闲的重要渠道。一部成功的视频作品&#xff0c;除了画面精美、音质清晰外&#xff0c;字幕的添加也是至关重要的一环。字幕不仅能增强视频的观感&#xff0c;还能提升信息的传达效率&#xff0c;让观众在享受视觉盛宴的同时&#xff0c;更加深入…

安装rancher时k3s exited with: exit status 1报错解决---针对于9系统

安装和配置步骤 安装 iptables 首先确保 iptables 软件包已安装在系统中。 加载 iptables 模块 手动加载需要的内核模块&#xff1a;执行 sudo modprobe iptable_nat 和 sudo modprobe iptable_filter。持久化加载这些模块&#xff1a;将模块名称添加到 /etc/modules-load.d/m…

vue项目使用百度地图

打开百度地图开放平台 百度地图开放平台 | 百度地图API SDK | 地图开发 在控制台新建应用 复制访问应用的ak 可修改地图样式 使用部分 <!-- 引入地图 --><div class"main-aside"><div id"b-map-container"></div></div> …

面试ssss

响应式布局 响应式布局是一种设计和开发网页的方法&#xff0c;使网页能够适应不同的设备和屏幕尺寸&#xff0c;提供更好的用户体验。它通过使用媒体查询&#xff08;Media Queries&#xff09;和弹性布局&#xff08;Flexbox&#xff09;等技术&#xff0c;根据设备的特性和…

设计模式- 组合模式(Composite)结构|原理|优缺点|场景|示例

​​​​​​​ 设计模式&#xff08;分类&#xff09; 设计模式&#xff08;六大原则&#xff09; 创建型&#xff08;5种&#xff09; 工厂方法 抽象工厂模式 单例模式 建造者模式 原型模式 结构型&#xff08;7种&…