css使用@media响应式适配各种屏幕的方法示例

news/2024/11/17 5:20:20/文章来源:https://www.cnblogs.com/li-sir/p/18427114

定义和使用

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

PC端设备屏幕的宽度

页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际刚好“>=1000”或“<=1200”的都执行)

 https://www.jb51.net/css/725261.html

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

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

相关文章

多智能体协同控制(1)

引言 多智能体系统协同控制算法起源于计算机领域关于分布式计算的研究,后由于数学家们的强势加盟,控制领域的研究一度占领高地。随着人工智能的发展,以多智能体强化学习为代表作的计算机领域专家又重回巅峰。 目前,每年多智能体相关的论文的都浩如烟海,成就了一批手持屠龙…

Axure原型设计:多层级动态表格

多层级表格又成为树形表格,是在后台常用的一种表格形式,当表格数据存在多层级关系是,可以通过多层级表格,从而更加清晰的呈现数据内容,帮助人们更好地理解和分析数据之间的关系,从而更加有效地传递信息。 所以今天作者就教大家怎么在Axure里制作多层级动态表格,包括展开…

frp内网穿透 宝塔部署服务端、客户端教程

宝塔部署教程链接:https://blog.csdn.net/m0_57944649/article/details/140693257 frp官方下载链接:https://github.com/fatedier/frp/releases一、部署服务端1、上传好文件后解压2、进入解压好了的文件夹“frp_0.58.1_linux_amd64”中,找到文件“frps.toml”,双击打开: …

建立数据库连接时出现错误:原因与解决方案

建立数据库连接时出现错误的原因可能有很多,以下是一些常见的原因及其解决方案: 原因登录信息错误:账号、密码、服务器名称或数据库名称不正确。网络问题:客户端与数据库服务器之间的网络连接不稳定或中断。数据库服务未启动:数据库服务没有运行,或者在尝试连接时服务停止…

数据库连接失败的解决方法有哪些

当遇到数据库连接失败的情况时,可以按照以下步骤进行排查和解决:检查数据库服务状态:确认数据库服务是否已启动并运行正常。可以使用阿里云控制台的服务监控工具或通过SSH登录服务器,使用命令行工具(如service mysqld status)来检查服务状态。验证网络连接:确保你的应用…

数据库常见十大错误_数据库十大报错语句

数据库操作时可能会遇到各种错误,这些错误通常是由不同的原因引起的,比如语法错误、连接问题、权限问题等。下面是数据库操作中常见的几种错误类型及其解决思路:连接失败:错误信息可能包括“无法连接到主机”、“连接被拒绝”等。检查数据库服务是否启动、网络连接是否正常…

阿里云主机数据库链接失败怎么回事

阿里云主机数据库连接失败的问题可能有多种原因,这里列举了一些常见的原因及解决办法:网络问题:确认你的网络连接是否正常。尝试使用其他设备或网络连接来验证问题是否出在网络方面。防火墙设置:确保防火墙没有阻止数据库连接。可以尝试临时禁用防火墙,或添加相应的规则来…

收藏:加不加「/」?Nginx location 路径与 proxy_pass 的规律

从一张梗图开始 起源于在 TG 某个频道看到的一张图:图下面的评价是:Nginx is so hard! 实际上这张图描述的是 nginx location 的路径配置,及 location 代码块中 proxy_pass 的路径关系,属于 nginx 应用中路径转发的知识。例如图中 Case 1 对应的代码块应该为:location /te…

直接通过修改二进制文件OpenSSH和OpenSSL的版本为最高版版本来达到形式主义等保要求的操作

文章开头的解释和说明本篇文章是通过形式上修改二进制文件中的版本号来达到某些像行尸走肉机器人类形式主义要求的等保标准要求,来完成其要求的“安全加固”。 我先吐槽一下,这些形式主义等保标准要求,只按照版本号比对来确定是否为最版本的检测逻辑来批量扫描,扫描出来的漏…

Nuxt Kit 使用日志记录工具

title: Nuxt Kit 使用日志记录工具 date: 2024/9/23 updated: 2024/9/23 author: cmdragon excerpt: 摘要:本文介绍在Nuxt 3框架的Nuxt Kit中使用日志记录工具的方法,重点讲解useLogger函数的应用,通过创建示例项目一步步展示如何配置和使用日志记录功能来监控应用状态、记…

CentOS限制物理内存大小方法

编辑/etc/sysconfig/grub在GRUB_CMDLINE_LINUX这行添加mem=1024M注释:配置是限制操作系统可用内存为1G。改后重启查看 作者:杨灏 出处:http://www.cnblogs.com/HByang/