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

CSS的媒体查询语法

CSS的媒体查询语法

      • 常见的媒体类型
      • 常见的特性
      • 示例

CSS的媒体查询语法可以根据不同的设备特性(如屏幕尺寸、分辨率等)应用不同的样式。基本语法如下:

@media 媒体类型 and (特性:) {/* 样式规则 */
}

常见的媒体类型

  • screen:用于显示在屏幕上的设备
  • print:用于打印机或预览页面
  • all:适用于所有设备

常见的特性

  • width:视口的宽度
  • height:视口的高度
  • min-width:最小宽度
  • max-width:最大宽度
  • min-height:最小高度
  • max-height:最大高度
  • resolution:设备的分辨率
  • orientation:设备的方向(landscape为横屏,portrait为竖屏)

示例

  1. 针对不同屏幕宽度设置样式
/* 屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {body {background-color: lightblue;}
}/* 屏幕宽度小于768px时应用 */
@media (max-width: 767px) {body {background-color: lightcoral;}
}
  1. 针对横屏和竖屏方向设置样式
/* 竖屏模式 */
@media (orientation: portrait) {body {background-color: lightgreen;}
}/* 横屏模式 */
@media (orientation: landscape) {body {background-color: lightyellow;}
}
  1. 结合多个条件使用
/* 屏幕宽度大于等于768px并且设备分辨率为高 */
@media (min-width: 768px) and (min-resolution: 192dpi) {body {background-color: lightpink;}
}

通过媒体查询,你可以为不同设备定制不同的样式,优化响应式设计。

相关文章:

CSS的媒体查询语法

CSS的媒体查询语法 常见的媒体类型常见的特性示例 CSS的媒体查询语法可以根据不同的设备特性(如屏幕尺寸、分辨率等)应用不同的样式。基本语法如下: media 媒体类型 and (特性: 值) {/* 样式规则 */ }常见的媒体类型 screen:用于…...

生产环境超实用shell脚本一

生产环境超实用shell脚本一 Shell脚本作为一种强大的自动化工具,能够帮助运维人员轻松应对各种复杂的任务。 本文将为您介绍服务器健康检查、日志清理、备份以及监控等多个方面,并详细阐述每个脚本的功能和应用场景,助力您提升运维效率&…...

【1】高并发导出场景下,服务器性能瓶颈优化

高并发导出场景下,服务器性能瓶颈通常出现在 CPU、内存、磁盘 I/O 或网络带宽等方面。为了解决这些问题,可以从以下几个方面进行优化: 1. 优化导出逻辑 减少计算复杂度:检查导出逻辑中是否存在不必要的计算或重复操作,…...

go的sync包学习

包含了sync.Mutex,sync.RWMutex,sync.Cond,sync.Map,sync.Once等demo sync.Mutex //讲解mutex import ("fmt""math/rand""sync""time" )type Toilet struct {m sync.Mutex } type Person struct {Name string }var DateTime "2…...

一文读懂:TCP网络拥塞的应对策略与方案

TCP(传输控制协议)是互联网中广泛使用的可靠传输协议,它通过序列号、确认应答、重发控制、连接管理以及窗口控制等机制确保数据的可靠传输。然而,在网络环境中,由于多个主机共享网络资源,网络拥塞成为了一个…...

用DeepSeek分析总结一下DeepSeek发表过的8篇论文

1. 《深度求索大语言模型:以长期主义拓展开源语言模型》(2024年1月5日) 2. 《深度求索代码模型:当大语言模型遇上编程——代码智能的崛起》(2024年1月26日) 3. 《深度求索视觉语言模型:迈向真…...

node.js使用mysql2对接数据库

一、引言 在现代Web开发中,Node.js作为一种高效、轻量级的JavaScript运行时环境,已经广泛应用于后端服务的开发中。而MySQL,作为一个广泛使用的关系型数据库管理系统(RDBMS),提供了强大的数据存储和查询功能…...

华为支付-免密支付接入免密代扣说明

免密代扣包括支付并签约以及签约代扣场景。 开发者接入免密支付前需先申请开通签约代扣产品(即申请配置免密代扣模板及协议模板ID)。 华为支付以模板维度管理每一个代扣扣费服务,主要组成要素如下: 接入免密支付需注意&#x…...

Java 面试真题解析与技巧分享

Java 面试对于每一位 Java 开发者来说都是至关重要的,它不仅是对我们技术能力的检验,更是我们迈向理想工作岗位的关键一步。在面试中,掌握常见真题的解题思路和回答技巧,能够让我们更加自信地展示自己的实力。本文将结合具体的面试…...

使用 Python 编程语言来实现机器学习小项目教程案例

以下是一个简单的机器学习小项目教程案例,使用 Python 编程语言和 Scikit-learn 库来实现一个分类任务。我们将使用经典的鸢尾花(Iris)数据集来训练一个分类器,预测鸢尾花的种类。 项目目标 使用机器学习算法对鸢尾花数据集进行分类,预测鸢尾花的类别(Setosa、Versicolor…...

网络安全 | 零信任架构:重构安全防线的未来趋势

网络安全 | 零信任架构:重构安全防线的未来趋势 一、前言二、零信任架构的核心概念与原理2.1 核心概念2.2 原理 三、零信任架构的关键技术组件3.1 身份管理与认证系统3.2 授权与访问控制系统3.3 网络与安全监测系统3.4 加密与数据保护技术 四、零信任架构与传统安全…...

react关于手搓antd pro面包屑的经验(写的不好请见谅)

我们先上代码,代码里面都有注释,我是单独写了一个组件,方便使用,在其他页面引入就行了 还使用了官方的Breadcrumb组件 import React, { useEffect, useState } from react; import { Breadcrumb, Button } from antd; import { …...

PHP-运算符

[题目信息]: 题目名称题目难度PHP-运算符2 [题目考点]: PHP运算符优先级[Flag格式]: SangFor{zEk4r_djfgy0CibPz6LdXpwBrXRckhIT}[环境部署]: docker-compose.yml文件或者docker tar原始文件。 http://分配ip:2067[题目writeup]&#x…...

chrome浏览器chromedriver下载

chromedriver 下载地址 https://googlechromelabs.github.io/chrome-for-testing/ 上面的链接有和当前发布的chrome浏览器版本相近的chromedriver 实际使用感受 chrome浏览器会自动更新,可以去下载最新的chromedriver使用,自动化中使用新的chromedr…...

BurpSuite抓包与HTTP基础

文章目录 前言一、BurpSuite1.BurpSuite简介2.BurpSuite安装教程(1)BurpSuite安装与激活(2)安装 https 证书 3.BurpSuite使用4.BurpSuite资料 二、图解HTTP1.HTTP基础知识2.HTTP客户端请求消息3.HTTP服务端响应消息4.HTTP部分请求方法理解5.HTTPS与HTTP 总结 前言 在网络安全和…...

SQLAlchemy 2.0的简单使用教程

SQLAlchemy 2.0相比1.x进行了很大的更新,目前网上的教程不多,以下以链接mysql为例介绍一下基本的使用方法 环境及依赖 Python:3.8 mysql:8.3 Flask:3.0.3 SQLAlchemy:2.0.37 PyMySQL:1.1.1使用步骤 1、创建引擎,链接到mysql engine crea…...

Android原生开发问题汇总

Fragment顶部出现一个白条怎么办?父类布局搞事情。 layer-list被拉伸问题 Android之 ImageView android:src和tools:src的区别是什么? Android运行时权限的总结,以及EasyPermissions框架的使用 Android Studio添加EasyPemissions Android中module怎…...

springboot中使用注解实现分布式锁

下面将详细介绍如何在 Spring Boot 里借助注解实现分布式锁,以login_lock:作为锁的 key 前缀,使用请求参数里的phone值作为 key,等待时间设为 0 秒,锁的持续时间为 10 秒。我们会使用 Redis 来实现分布式锁,同时借助 S…...

Android TabLayout 使用进阶(含源码)

android:layout_height“match_parent” android:orientation“vertical” tools:context“.mode2.ClassificationActivity”> <com.google.android.material.tabs.TabLayout android:id“id/tab_layout” android:layout_width“match_parent” android:layout_he…...

数据库系统概论的第六版与第五版的区别,附pdf

我用夸克网盘分享了「数据库系统概论第五六版资源」&#xff0c;点击链接即可保存。 链接&#xff1a;https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容 为了保持科学性、先进性和实用性&#xff0c;在第5版教材基础上对全书内容进行了修改、更新和充实。 在科…...

管理etcd的存储空间配额

如何管理etcd的存储空间配额 - 防止集群存储耗尽指南 本文基于etcd v3.4官方文档编写 为什么需要空间配额&#xff1f; 在分布式系统中&#xff0c;etcd作为可靠的键值存储&#xff0c;很容易成为系统瓶颈。当遇到以下情况时&#xff1a; 应用程序频繁写入大量数据未及时清理…...

深入浅出 NRM:加速你的 npm 包管理之旅

文章目录 前言一、NRM 是什么&#xff1f;二、为什么需要 NRM&#xff1f;三、NRM 的优势四、NRM 的安装与使用4.1 安装 NRM4.2 查看可用的 npm 源4.3 切换 npm 源4.4 测试 npm 源速度4.5 添加自定义 npm 源4.6 删除 npm 源 五、NRM 的进阶使用六、总结 前言 作为一名 JavaScr…...

ESP32开发学习记录---》GPIO

she 2025年2月5日&#xff0c;新年后决定开始充电提升自己&#xff0c;故作此记,以前没有使用过IDF开发ESP32因此新年学习一下ESP32。 ESPIDF开发环境配置网上已经有很多的资料了&#xff0c;我就不再赘述&#xff0c;我这里只是对我的学习经历的一些记录。 首先学习一个…...

stm32点灯 GPIO的输出模式

目录 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置&#xff08; 默认不变&#xff09;HSI 高速内部时钟8Mhz 5.项目配置 6.代码 延时1s循环LED亮灭 1.选择RCC时钟 2.SYS 选择调试模式 SW 3.GPIO 配置 4.时钟树配置&#xff08; 默认不变&#xff09…...

[paddle] 矩阵的分解

特征值 设 A A A 是一个 n n n \times n nn 的方阵&#xff0c; λ \lambda λ 是一个标量&#xff0c; v \mathbf{v} v 是一个非零向量。如果满足以下方程&#xff1a; A v λ v A\mathbf{v} \lambda\mathbf{v} Avλv 则称 λ \lambda λ 为矩阵 A A A 的一个 特征值…...

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f383;1.修改密码 -持久…...

【深度学习】DataLoader自定义数据集制作

第一步 导包 import os import matplotlib.pyplot as plt %matplotlib inline import numpy as np import torch from torch import nn import torch.optim as optim import torchvision from torchvision import transforms,models,datasets import imageio import time impo…...

【Elasticsearch】Geo-distance聚合

geo_distance聚合的形状是圆形。它基于一个中心点&#xff08;origin&#xff09;和一系列距离范围来计算每个文档与中心点的距离&#xff0c;并将文档分配到相应的距离范围内。这种聚合方式本质上是以中心点为圆心&#xff0c;以指定的距离范围为半径的圆形区域来划分数据。 为…...

【R语言】apply函数族

在R语言中使用循环操作时是使用自身来实现的&#xff0c;效率较低。所以R语言有一个符合其统计语言出身的特点&#xff1a;向量化。R语言中的向量化运用了底层的C语言&#xff0c;而C语言的效率比高层的R语言的效率高。 apply函数族主要是为了解决数据向量化运算的问题&#x…...

Vue - shallowRef 和 shallowReactive

一、shallowRef 和 shallowReactive &#xff08;一&#xff09;shallowRef 在 Vue 3 中&#xff0c;shallowRef 是一个用于创建响应式引用的 API&#xff0c;它与 ref 相似&#xff0c;但它只会使引用的基本类型&#xff08;如对象、数组等&#xff09;表现为响应式&#xf…...

双目标定与生成深度图

基于C#联合Halcon实现双目标定整体效果 一&#xff0c;标定 1&#xff0c;标定前准备工作 &#xff08;获取描述文件与获取相机参数&#xff09; 针对标准标定板可以直接调用官方提供描述文件&#xff0c;也可以自己生成描述文件后用PS文件打印 2&#xff0c;相机标定 &…...

实名制-网络平台集成身份证实名认证接口/身份证查询-PHP

在当今数字化快速发展的时代&#xff0c;线上平台的安全性和用户体验成为了衡量其成功与否的关键因素。其中&#xff0c;身份证实名认证接口的集成显得尤为重要&#xff0c;它不仅为用户提供了更加安全、可靠的网络环境&#xff0c;同时也增强了平台的信任度和合规性。 对于任…...

全面解析机器学习优化算法中的进化策略

全面解析机器学习优化算法中的进化策略 全面解析机器学习优化算法中的进化策略引言什么是进化策略?基本概念核心组件算法流程数学基础高斯扰动期望值更新与其他优化方法的比较梯度下降法(Gradient Descent, GD)遗传算法(Genetic Algorithm, GA)Python案例基本实现改进版:…...

go数据结构学习笔记

本博文较为完整的实现了go的链表、栈&#xff0c;队列&#xff0c;树&#xff0c;排序&#xff0c;链表包括顺序链表&#xff0c;双向链表&#xff0c;循环链表&#xff0c;队列是循环队列&#xff0c;排序包含冒牌、选择 1.链表 1.1 顺序链表 type LNode struct {data intn…...

【深度学习】DeepSeek模型介绍与部署

原文链接&#xff1a;DeepSeek-V3 1. 介绍 DeepSeek-V3&#xff0c;一个强大的混合专家 (MoE) 语言模型&#xff0c;拥有 671B 总参数&#xff0c;其中每个 token 激活 37B 参数。 为了实现高效推理和成本效益的训练&#xff0c;DeepSeek-V3 采用了多头潜在注意力 (MLA) 和 De…...

使用SpringBoot发送邮件|解决了部署时连接超时的bug|网易163|2025

使用SpringBoot发送邮件 文章目录 使用SpringBoot发送邮件1. 获取网易邮箱服务的授权码2. 初始化项目maven部分web部分 3. 发送邮件填写配置EmailSendService [已解决]部署时连接超时附&#xff1a;Docker脚本Dockerfile创建镜像启动容器 1. 获取网易邮箱服务的授权码 温馨提示…...

【工具篇】深度揭秘 Midjourney:开启 AI 图像创作新时代

家人们,今天咱必须好好唠唠 Midjourney 这个在 AI 图像生成领域超火的工具!现在 AI 技术发展得那叫一个快,各种工具层出不穷,Midjourney 绝对是其中的明星产品。不管你是专业的设计师、插画师,还是像咱这种对艺术创作有点小兴趣的小白,Midjourney 都能给你带来超多惊喜,…...

构成正方形的数量:算法深度剖析与实践

目录 引言算法核心概念 定义正方形的构成条件数据结构与输入形式算法数学原理 几何关系的数学表达坐标运算与判定逻辑Python 实现 代码展示代码解析Python 实现的优势与局限C 语言实现 代码展示代码解析C 语言实现的性能特点性能分析与优化 性能分析 时间复杂度空间复杂度优化思…...

Spring设计模式(9种)(详细篇)

总体分为三大类&#xff1a; 创建型模式&#xff1a;工厂方法模式、单例模式。 结构型模式&#xff1a;适配器模式、代理模式、装饰器模式。 行为型模式&#xff1a;观察者模式、策略模式、模板方法模式。 一、简单工厂模式&#xff08;Simple Factory&#xff09; 概述&…...

使用Express.js和SQLite3构建简单TODO应用的后端API

使用Express.js和SQLite3构建简单TODO应用的后端API 引言环境准备代码解析1. 导入必要的模块2. 创建Express应用实例3. 设置数据库连接4. 初始化数据库表5. 配置中间件6. 定义数据接口7. 定义路由7.1 获取所有TODO项7.2 创建TODO项7.3 更新TODO项7.4 删除TODO项 8. 启动服务器 …...

2025年2月6日(anaconda cuda 学习 基本命令)

查看电脑的显卡型号是否支持CUDA的安装 https://developer.nvidia.com/zh-cn/cuda-gpus 查看可以安装的CUDA版本 https://docs.nvidia.com/cuda/cuda-toolkit-release-notes/index.html CUDA安装地址 https://developer.nvidia.com/cuda-toolkit-archive Anaconda下载地址 htt…...

大数据方向知识图谱及发展前景分析

目录 一、知识体系 二、大数据领域前景分析&#xff1a; 1. 市场需求 2. 技术趋势 3. 职业发展路径 4. 学习路线建议 5. 推荐认证体系 一、知识体系 大数据知识体系 ├── 基础理论 │ ├── 数学基础&#xff1a;概率统计、线性代数、离散数学 │ ├── 计算机基…...

Docker深度解析:安装各大环境

安装 Nginx 实现负载均衡&#xff1a; 挂载 nginx html 文件&#xff1a; 创建过载目录&#xff1a; mkdir -p /data/nginx/{conf,conf.d,html,logs} 注意&#xff1a;在挂载前需要对 conf/nginx.conf 文件进行编写 worker_processes 1;events {worker_connections 1024; …...

Verilog语言学习总结

Verilog语言学习&#xff01; 目录 文章目录 前言 一、Verilog语言是什么&#xff1f; 1.1 Verilog简介 1.2 Verilog 和 C 的区别 1.3 Verilog 学习 二、Verilog基础知识 2.1 Verilog 的逻辑值 2.2 数字进制 2.3 Verilog标识符 2.4 Verilog 的数据类型 2.4.1 寄存器类型 2.4.2 …...

K8S Deployment 实现 蓝绿 发布

一、何为蓝绿发布 蓝绿发布&#xff08;Blue - Green Deployment&#xff09;是一种软件部署策略&#xff0c;旨在最大程度减少应用程序停机时间&#xff0c;确保新老版本系统平稳过渡。以下为详细介绍&#xff1a; 1.1、基本概念 存在两个完全相同的生产环境&#xff0c;通…...

2025新鲜出炉--前端面试题(一)

文章目录 1. vue3有用过吗, 和vue2之间有哪些区别2. vue-router有几种路由, 分别怎么实现3. webpack和rollup这两个什么区别, 你会怎么选择4. 你能简单介绍一下webpack项目的构建流程吗5. webpack平时有手写过loader和plugin吗6. webpack这块你平时做过哪些优化吗&#xff1f;7…...

【ArcGIS Pro 简介1】

ArcGIS Pro 是由 Esri &#xff08;Environmental Systems Research Institute&#xff09;公司开发的下一代桌面地理信息系统&#xff08;GIS&#xff09;软件&#xff0c;是传统 ArcMap 的现代化替代产品。它结合了强大的空间分析能力、直观的用户界面和先进的三维可视化技术…...

CentOS 6.5编译Rsyslog 8.1903.0

个人博客地址&#xff1a;CentOS 6.5编译Rsyslog 8.1903.0 | 一张假钞的真实世界 个人很早之前的博文&#xff0c;迁移至此作为历史记录。 源码下载参考我的另外一片博文&#xff1a;CentOS 7.3 编译 Rsyslog 8.1903.0。 本篇博文从创建构建环境开始填坑/(ㄒoㄒ)/~~。通过上…...

SQLAlchemy-2.0中模型定义和alembic的数据库迁移工具

SQLAlchemy-2.0中模型定义和alembic的数据库迁移工具 一、SQLAIchemy的介绍二、数据库引擎1、支持的数据库1.1、sqlite数据库1.2、MySQL数据库1.3、数据库引擎的参数 三、定义模型类1、定义模型2、engine负责数据库迁移 四、alembic数据库迁移⼯具1、安装alembic2、初始化alemb…...

两种文件类型(pdf/图片)打印A4半张纸方法

环境:windows10、Adobe Reader XI v11.0.23 Pdf: 1.把内容由横排变为纵排&#xff1a; 2.点击打印按钮&#xff1a; 3.选择打印页范围和多页&#xff1a; 4.内容打印在纸张上部 图片&#xff1a; 1.右键图片点击打印&#xff1a; 2.选择打印类型&#xff1a; 3.打印配置&am…...