css-媒体查询完整写法

已于 2023-04-22 09:01:34 修改
阅读量654 收藏 1
点赞数 3
分类专栏： CSS 文章标签： css
于 2023-04-11 14:38:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_57804294/article/details/130083028
版权
媒体查询是CSS中的一个重要概念，用于根据设备特性应用不同的样式。它包含关键词如and,not,only来设定条件，支持的媒体类型有screen,print,speech和all。媒体特征如width,max-width,min-width和orientation允许开发者调整样式以适应不同尺寸和方向的屏幕。顺序书写和属性的重叠性是编写媒体查询时需要注意的关键点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

媒体查询的完整写法：

                @media 关键词 媒体类型 (媒体特征)  { css 代码 }

        关键词： 

  • and :用来判断谁和谁
  • only：一个判断条件
  • not：非（判断不是...时）

        媒体类型

  • screen :屏幕设备
  • print：打印预览模式
  • speech：屏幕阅读模式
  • all：不区分类型 （默认值）包括前三种

        媒体特征

  • width：视口宽
  • max-width：视口最大
  • min-width：视口最小
  • orientation：屏幕方向（portrait 竖屏 ; landscape 横屏）

注：媒体查询：顺序书写（css属性都具有重叠性）

        如果用 min-width：（从小到大）

        如果用max-width：（从大到小）

CSS3媒体查询实战案例
zhangawei123的博客
10-13 1223
这篇文章会展示一下css媒体查询的案例，使用弹性盒子，帮助大家更好的运用媒体查询。 第一个案例是模仿美团官网的案例，比较简单，用于学习和练习。 第二个案例是比较复杂的实战案例。用于实践和提升能力。
vue3 使用 postcss-pxtorem 实现自适应
不怕麻烦的鹿丸的博客
02-20 4008
if(/%/ig.test(px)) { // 有百分号%，特殊处理return px} else {// 144 为设计图尺寸1440除以10。
【CSS】媒体（媒介 / media）查询
小秀的博客
05-22 2524
媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。
css重点知识汇总（一）
最新发布
Wzh20060111的博客
03-20 823
自己整理的css重点知识汇总
这是媒体查询
csdn_jwdlh的博客
11-05 614
媒体查询什么是媒体查询背景介绍媒体查询的使用组成mediatype 查询类型关键字媒体特性媒体特性（拓展属性——了解）媒体查询语法规范 什么是媒体查询 背景 近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦
CSS媒体查询常用写法
灯火十里
07-17 782
/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { } /* Medium devices (landscape tablets, 768
css媒体查询写法
weixin_34413103的博客
07-04 1735
/* 大于1000px 大于640px小于1000px 小于640px */ tv? 仅限于电视媒体 orientation: landscape？ 仅限在横屏有效 , 逗号分隔，意思相当于or handheld 手持设备 。。。还有好多，真六！ @media (min-width: 1000px) { ...
vue-cli5中使用postcss-px-to-viewport
CSTGShaGuo的博客
02-25 2158
vue-cli5中使用postcss-px-to-viewport
vue中使用postcss-pxtorem实现适配
gegephp的博客
03-29 6757
这里写自定义目录标题前言安装amfe-flexible和postcss-pxtorem配置及使用可能遇到问题 前言 很少在pc端使用rem，不过遇到一个比较较真的ui，要求每个尺寸下都和设计稿完全一样，在自己手写媒体查询和插件之间选了后者，一劳永逸，今天就说下配置及使用；下面是在vue2.6、vue-cli4中的配置(注意：不同版本配置方式不同) 安装amfe-flexible和postcss-pxtorem npm install postcss-pxtorem -S npm install amfe-f
vue Syntax Error Error PostCSS plugin postcss-pxtorem requires PostCSS 8
m0_67391870的博客
03-09 1698
vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-users: 关于脚手架生成项目,配置自适应postcss-pxtorem配置报错 首先你在.postcssrc.js文件正常配置(详细配置) module.exports = { plugins: { // 兼容浏览器，添加前缀 autoprefixer: { override
css媒体查询
ssjjrr的博客
10-01 835
css媒体查询
CSS媒体查询的用法
我的博客
08-23 2922
媒体查询：根据设备显示器的特性（如视窗宽度、屏幕宽度、设备方向等）来设定不同的CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
Css媒体查询
weixin_43800477的博客
12-23 219
媒体查询就是根据不同的设备宽度设置断点，然后书写css样式覆盖之前的样式。 媒体类型：screen：计算机屏幕，print：打印，all：所有设备 媒体属性：多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。媒体属性必须用括号()包起来width | min-width | max-width height | min-height | max-height 逻辑操作符：and，or，not，only and用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当
css之媒体查询
weixin_43465508的博客
04-03 9041
因为移动端的尺寸不同,但是，在移动端屏幕上显示的元素的大小是相同的元素的尺寸大小，要根据屏幕尺寸的大小发生变化媒体类型（media types）描述设备的一般类别媒体特性描述了 user-agent输出设备 或是浏览器环境的具体特征。
css 媒体查询
liangyiyiliang的专栏
02-21 521
之前接了一个页面的私活，但是现在突然提出要适配手机。由于之前写的时候是用的px为单位，然后通过postcss 的插件 中的postcss-px-to-viewport 将px全部转为vw 。本身转为vw之后就很好的兼容了很多PC 。但是现在手机上部分样式就乱了，于是就想到了之前用到过的媒体查询（是写在css代码中的），在查阅资料的时候发现居然还有可以加载link标签上的媒体查询。果断使用，特此记录一下。 代码如下： <link rel="stylesheet" href="./main.css"
bootstrap媒体查询常用写法
qq_42786138的博客
01-06 875
@media (max-width: 768px) { /*超小屏幕设备 手机*/ } @media (min-width: 768px) and (max-width: 992px) { /*小屏幕设备 平板*/ } @media (min-width: 992px) and (max-width: 1200px) { /*中等屏幕设备 桌面*/ } @media (min-width: 1200px) { /*大屏幕设备 桌面*/ } ...
响应式布局——媒体查询
m0_45659764的博客
04-05 2879
什么是响应式布局？同一行代码，适配不同的屏幕 一、媒体查询 1.1 基本语法 目标：能够根据设备宽度的变化，设置差异化样式 开发常用写法 媒体特性常用写法 max-width（小于等于） min-width（大于等于） @media (媒体特性) { 选择器{ 样式 } } 1.2书写顺序 min-width（从小到大） max-width（从大到小） 1.3 （了解）完整写法 @media 关键词 ...
媒体查询
feiyan939的博客
08-15 322
本人喜欢用的：（需要用到多少个屏幕适应的话就写几套css代码） 1、引入头文件告诉浏览器要自适应网页大小 meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 2、示例，在此就只写两个屏作为说明： @media screen
媒体查询怎么写
admin11196的博客
12-04 117
/* 重新写了一份 */ @media (max-width: 1280px) { .timerChose { left: 360px !important; } } @media (min-width:1280px) and (max-width: 1536px) { .timerChose { left:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值