H5C3--媒体查询（向上兼容，向下覆盖),link中引入的ont and only
一.使用
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<!--使用媒体查询
1.媒体查询主要就是用来查询当前设备的宽度(高度)，根据结果动态的设置样式
2.所以：媒体查询的实现的方式就是样式-->
<style>
/*媒体查询的细节--重点理解和掌握 （前提是判断最小值，并且从小到大进行判断.如果是判断最大值，就应该从大到小写）
1.向上兼容：在窄屏设置的样式。默认在大屏也会存在
2.向下覆盖：宽屏的样式设置会覆盖窄屏的样式设置 1000*/
body{
background-color: red;
}
/*@media screen and (max-width: 768px){
body{
background-color: green;
}
}
@media screen and (max-width: 992px){
body{
background-color: blue;
}
}
@media screen and (max-width: 1200px){
body{
background-color: blue;
}
}*/
/*
需求：设置在不同屏幕宽度时，页面的背景色
1. w < 768px red
2. 768 <= w < 992 green
3. 992 <= w < 1200 blue
4. w >= 1200 pink
*/
@media screen and (max-width: 1200px){
body{
background-color: blue;
}
}
@media screen and (max-width: 992px){
body{
background-color: green;
}
}
@media screen and (max-width: 768px){
body{
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
二. link引入的时候的not 和 only
a.css文件
body{
background-color: red;
}
b.css文件
body{
background-color: blue;
}
media="only" 的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" media="only screen and (min-width:768px) and (max-width:992px)" href="b.css">
<!--上面的意思是默认是使用a.css的样式，如果屏幕宽度在768px和992px这个区间的话，就会使用b.css这个样式-->
<title>Title</title> </head>
<body> </body>
</html>
media="not" 取反，和上面的only刚好相反的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" media="not screen and (min-width:768px) and (max-width:992px)" href="b.css">
<!--not and only
not:取反：判断不满足条件的情况-->
<title>Title</title> </head>
<body>
</body>
</html>
H5C3--媒体查询（向上兼容，向下覆盖),link中引入的ont and only的更多相关文章
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...
- 媒体查询的应用以及在css3中的变革
CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...
- css媒体查询aspect-ratio宽高比在less中的使用
css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配 使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- CSS Media媒体查询使用大全，完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
- 媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”.如:wi ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
随机推荐
- JS流程控制语句 退出循环break 在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。
退出循环break 在while.for.do...while.while循环中使用break语句退出当前循环,直接执行后面的代码. 格式如下: for(初始条件;判断条件;循环后条件值更新) { i ...
- 在github上怎样克隆vue项目及运行
长时间不做vue项目,今天看vue项目运行时有些指令忘记了,在这里写下相关指令 .克隆已有项目,一般情况项目中的README.md写的是项目运行步骤,一般项目的运行如下 克隆项目 git clone ...
- WPF 深入浅出学习 Day1
- 廖雪峰Java11多线程编程-3高级concurrent包-1ReentrantLock
线程同步: 是因为多线程读写竞争资源需要同步 Java语言提供了synchronized/wait/notify来实现同步 编写多线程同步很困难 所以Java提供了java.util.concurre ...
- mysql权限操作
1.mysql权限操作 grant select,insert on test1.tb1 to ltx2@127.0.0.1 默认权限:什么都没有 2.用户管理特殊命令: 创建用户:create us ...
- 【Codeforces Round #424 (Div. 2) D】Office Keys
[Link]:http://codeforces.com/contest/831/problem/D [Description] 有n个人,它们都要去一个终点,终点位于p; 但是,在去终点之前,他们都 ...
- duilib教程之duilib入门简明教程3.第一个程序 Hello World
小伙伴们有点迫不及待了么,来看一看Hello World吧:新建一个空的win32项目,新建一个main.cpp文件,将以下代码复制进去: #include <windows.h> #in ...
- MSI右键添加管理员运行.reg
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Msi.Package\shell\runas]@="右键以管理员运行MSI& ...
- php中$_REQUEST、 $_GET、 $_POST、 $_COOKIE 的关系和区别
看到REQUEST可以通吃GET .POST .COOKIE 后 感觉这个$_REQUEST太强大了是不是其他的几个超级变量就没有用了,下面对他们整体做个比较: 1.安全性 post>get 2 ...
- TCP重传机制的学习应用
1. TCP重传机制 TCP协议是一个可靠的协议.发送方每次发送一个数据包,需要等到ACK确认包再继续发送. 发出去的请求包在规定时间内没有收到ACK,不管是请求包丢失,还是ACK包丢失,还是网络延迟 ...