1 、媒体查询介绍

能够根据设备宽度的变化，设置差异化的样式

媒体特性常用写法：
1.max-width
2. min-width

样例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 视口宽度小于等于768px， 网页背景色是粉色 */@media (max-width: 768px) {body {background-color: pink;}}/* 视口宽度大于等于1200px， 网页背景色是skyblue */@media (min-width: 1200px) {body {background-color: skyblue;}}</style>
</head>
<body>
</body>
</html>

2 、书写顺序

因为CSS属性有层叠性的特性，所以在书写媒体查询的代码时，应注意书写顺序：

mini-width（从小到大书写）
max-width（从大到小书写）

要保证后写的属性可以覆盖掉前面的属性

3、媒体查询完整代码

上面例子是简洁写法

@media (媒体特性){选择器{样式}
}

完整写法

@media 关键词  媒体类型 and(媒体特性){css样式代码
}

关键词：and only not

媒体类型：用来区分设备类型，比如屏幕设备，打印机设备等

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上三种情形

媒体特性：主要用来表述媒体类型的具体特征，比如当前屏幕的宽高、分辨率等

特性名称	属性	值
视口的宽和高	width、height	数值
`视口最大宽或高`	`max-width`、max-height	数值
视口最小宽或高	`min-width`、min-height	数值
屏幕方向	orientation	protrait:竖屏，landscape:横屏

4、媒体查询，link写法

样例代码;注意书写顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 视口宽度 >= 992px，网页背景色为粉色 --><!-- 视口宽度 >= 1200px，网页背景色为绿色 --><link rel="stylesheet" href="./one.css" media="(min-width: 992px)"><link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body></body>
</html>

one.css

body {background-color: pink;
}

tow.css

body {background-color: green;
}

web前端基础——媒体查询相关推荐

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
html web前端基础(1)
html web前端基础(1) 本人暂时所用的学习软件是HB(HBuilder) 所以下方代码展示也是在HB所呈现的什么是web : 1.典型的应用: 1.C / S ***** client: 客 ...
html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
WEB前端基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
Web前端基础知识总结
一.HTML和CSS 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是pres ...
2021年web前端基础面试题
全方面面试总结 1.javascript JS面试题 JS面试题手写无敌JS 原始类型(基础类型) boolean null undefined number string symbol null不 ...

web前端基础——媒体查询

文章目录

1 、媒体查询介绍

2 、书写顺序

3、媒体查询完整代码

4、媒体查询，link写法

web前端基础——媒体查询相关推荐

最新文章

热门文章

web前端基础——媒体查询

文章目录

1 、媒体查询介绍

2 、书写顺序

3、媒体查询完整代码

4、 媒体查询，link写法

web前端基础——媒体查询相关推荐

最新文章

热门文章

4、媒体查询，link写法