C3 多媒体查询

文章目录

  • 前言
  • CSS3 多媒体查询
    • CSS2 多媒体类型
    • CSS3 多媒体查询
    • 浏览器支持
    • 多媒体查询语法
    • CSS3 多媒体类型
    • 多媒体查询简单实例
  • 媒体类型
  • 媒体功能
  • 更多实例
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:CSS
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

CSS3 多媒体查询

CSS2 多媒体类型

@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。

例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。

但是这些多媒体类型在很多设备上支持还不够友好。

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情,例如:

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏,竖屏) 。
分辨率
目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

在这里插入图片描述

多媒体查询语法

多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {CSS-Code;
}

如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

  • not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

  • all: 所有设备,这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒体类型

在这里插入图片描述

多媒体查询简单实例

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

@media screen and (min-width: 480px) {body {background-color: lightgreen;}
}

以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧:

@media screen and (min-width: 480px) {#leftsidebar {width: 200px; float: left;}#main {margin-left:216px;}
}

媒体类型

在这里插入图片描述

媒体功能

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

更多实例

使用 @media 查询来制作响应式设计:

@media only screen and (max-width: 500px) {.gridmenu {width:100%;}.gridmain {width:100%;}.gridright {width:100%;}
}

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

SpringBoot 2 系列停止维护,Java8 党何去何从?

SpringBoot 2.x 版本正式停止更新维护&#xff0c;官方将不再提供对 JDK8 版本的支持 SpringBoot Logo 版本的新特性 3.2 版本正式发布&#xff0c;亮点包括&#xff1a; 支持 JDK17、JDK21 版本 对虚拟线程的完整支持 JVM Checkpoint Restore&#xff08;Project CRaC&…

Django之Auth模块

Auth模块引入 我们在创建一个Django项目之后&#xff0c;直接执行数据库迁移命令会自动生成很多表 django_sessionauth_userDjango在启动之后就可以直接访问admin路由&#xff0c;需要输入用户名和密码&#xff0c;数据参考的就是auth_user表,并且必须是管理员用户才能进入 【…

quickapp_快应用_某些css样式不兼容问题

样式问题 引入css样式文件[1] 单位px [2]选择器[3]盒模型[4]样式布局-默认弹性布局且不可取消[5-1]样式切换-类名的动态切换-语法[5-2]样式切换 - 类名的动态切换-目标元素[5-3] 样式切换 - 行内样式动态切换[6]background[7]overflow[8]border-radius[9]盒子阴影[10] 定位erro…

【调度算法】开放车间调度问题遗传算法(failed)

省流&#xff1a;这是一个错误的代码备份&#xff0c;如果你需要可以直接运行的完整代码&#xff0c;请移步GitHub。 本以为手搓了一个单机调度和并行机调度的遗传算法&#xff0c;就可以尝试写开放车间的遗传算法了&#xff0c;结果手搓了两天&#xff0c;开始作业时间和结束…

1、Mysql架构与历史

Mysql逻辑架构 最上层是服务并不是Mysql所独有的&#xff0c;大多数基于网络的客户端/服务器的工具或者服务都有类似的架构&#xff0c;比如连接处理&#xff0c;授权认证&#xff0c;安全等。 第二层是Mysql比较有意思的部分。大多数Mysql的核心服务都在这一层&#xff0c;…

torch.view()和.reshape()

view只能作用在连续的张量上&#xff08;张量中元素的内存地址是连续的&#xff09;。而reshape连续or非连续都可以。 调用x.reshape的时候&#xff0c;如果x在内存中是连续的&#xff0c;那么x.reshape会返回一个view&#xff08;原地修改&#xff0c;此时内存地址不变…

用户与组管理:如何在服务器系统中管理用户和权限

你是否想过&#xff0c;当你登录到一个服务器系统时&#xff0c;你是如何被识别和授权的&#xff1f;你是否知道&#xff0c;你可以通过创建和管理用户和组来简化和优化你的系统管理工作&#xff1f;你是否想了解一些常用的用户和组管理命令和技巧&#xff1f;如果你的答案是肯…

c语言实现简单的string

文章目录 前言一、注意事项二、代码valgrind扫描总结 前言 在c语言中利用面向对象的编程方式&#xff0c;实现类似c中的string类。 一、注意事项 所有与string结构体相关的函数全都没有返回值。 在c中&#xff0c;当产生临时对象时编译器会自动的加入析构函数&#xff0c;销毁…

Walrus 入门教程:如何创建模板以沉淀可复用的团队最佳实践

模板是 Walrus 的核心功能之一&#xff0c;模板创建完成后用户可以重复使用&#xff0c;并在使用过程中逐渐沉淀研发和运维团队的最佳实践&#xff0c;进一步简化服务及资源的部署。用户可以使用 HCL 语言自定义创建模板&#xff0c;也可以一键复用 Terraform 社区中上万个成熟…

云原生安全工具汇总(docker、k8s、Kubernetes、Git仓库)

目录 Metarget:云原生靶机环境 CDK:容器环境定制的渗透测试工具 container-escape-check:容器逃逸检测

synchronized在代码中的用法

synchronized可以对两种对象加锁&#xff1a;实例对象和类对象。下边先说对类对象加锁的代码&#xff1a; 第1是修饰static方法&#xff0c;第2种是直接锁类的class对象&#xff1b; /*** title: SynchronizedStaticDemo1* description: synchronized 对类加锁1* author: * d…

【Python百宝箱】Python数据探险:Excel与数据科学的完美结合

前言 在当今信息爆炸的时代&#xff0c;数据处理和分析已经成为各行各业不可或缺的一部分。在众多数据处理工具中&#xff0c;Python以其简洁而强大的语法成为数据科学家和分析师的首选之一。本文将深入探讨与电子表格处理相关的Python库&#xff0c;介绍它们的功能、应用场景…

批量按顺序1、2、3...重命名所有文件夹里的文件

最新&#xff1a; 最快方法&#xff1a;先用这个教程http://文件重命名1,2......nhttps://jingyan.baidu.com/article/495ba841281b7079b20ede2c.html再用这个教程去空格&#xff1a;利用批处理去掉文件名中的空格-百度经验 (baidu.com) 以下为原回答 注意文件名有空格会失败…

LeetCode Hot100 105.从前序与中序遍历序列构造二叉树

题目&#xff1a;给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 代码&#xff1a; class Solution {private Map<Integer, Integer> indexM…

ESP32网络开发实例-远程Web串口监视器

远程Web串口监视器 文章目录 远程Web串口监视器1、应用介绍2、软件准备3、硬件准备4、代码实现在本文中,我们将构建一个 ESP32 网络服务器,用作远程串行监视器。 基于 Web 的串行监视器的工作方式与通常用于调试目的的 Arduino IDE 串行监视器的工作方式相同。 1、应用介绍 …

数字逻辑电路基础-时序逻辑电路之移位寄存器

文章目录 一、移位寄存器定义二、verilog源码三、仿真结果一、移位寄存器定义 移位寄存器定义 A shift register is a type of digital circuit using a cascade of flip flops where the output of one flip-flop is connected to the input of the next. 移位寄存器是一种将…

docker部署MySQL5.7设置密码和远程访问的方法

运行MySQL docker run -p 3306:3306 --name mysql57 -v /root/mysql/log:/var/log/mysql -v /root/mysql/data:/var/lib/mysql -v /root/mysql/conf:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORDD7txumqc2b! -d mysql:5.7 --character-set-serverutf8mb4 --collation-serverutf8…

c++八股文记录

八股文 1.类和结构体的区别 在 C 中&#xff0c;类&#xff08;class&#xff09;和结构体&#xff08;struct&#xff09;在语法上几乎是相同的&#xff0c;唯一的区别是默认的访问权限。在结构体中&#xff0c;默认的访问权限是公有的&#xff08;public&#xff09;&#x…

基于51单片机超市快递寄存自动柜设计源程序

一、系统方案 1、本设计采用这51单片机作为主控器。 2、存包&#xff0c;GSM短信取件码。 3、液晶1620显示。 4、矩阵键盘输入取件码&#xff0c;完成取包。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /******************************…

python基于flask_sockets实现WebSocket

WebSocket是啥&#xff1f; WebSocket是HTML5引入的新的通信协议&#xff0c;主要由Web客户端和服务器实现&#xff0c;当然它也可以在Web之外实现。 与HTTP连接不同&#xff0c;WebSocket连接是客户端和服务器之间永久的双向通信通道&#xff0c;其中任何一个都可以启动交换。…