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 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
随机推荐
- nginx 配置文件备份 nginx.conf and vhosts
bogon:vhosts xingchong$ brew services restart nginx Stopping `nginx`... (might take a while) ==> ...
- T2960 全民健身【思维Dp，预处理，差分优化】
Online Judge:YCJSOI Label:Dp,思维题,预处理,滚动优化 题目描述 乐乐现在掌管一个大公司,办公楼共有n层.为了增加员工的身体素质,他决定在每层楼都建立一个活动室,活动室分乒 ...
- 深入理解Java虚拟机（程序编译与代码优化）
文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...
- （转）第03节：在Canvas上插入图片并设置旋转属性
我们已经学会了在Canvas上画简单的图形,这节我们就在Canvas上加一张图片.用到fabric.Image对象把图片添加到Canvas上. HTML文件:为了效果更好看我在html里写了一些CSS ...
- iOS绘制线条的使用
1.相关简介 1.1.iOS之UIBezierPath贝塞尔曲线属性简介 1.2.iOS之CAShapeLayer属性简介 2.绘制曲线 2.1.方法详解 - (void)addQuadCurveTo ...
- disruptor 高效队列
disruptor 是什么: disruptor 是一个 低延时的 无锁 环形 队列. 相较于 java的 队列 ,他有明显的优点 ,无界,无锁,低延时(解决了为内存共享问题 ) disrupto ...
- 如何学习AxureRP Axure学习方法
从作者最初接触的5.5版本,到5.6版本,到后来6.0的多个迭代版本,直到现在的6.5版本,AxureRP每次的版本升级都伴随着新功能的增 加,也解决了原型设计上的一些难题.这也从另一个方面诠释了“学 ...
- pycharm使用教程链接+部分练习题01
pycharm安装: https://www.cnblogs.com/jin-xin/articles/9811379.html pycharm使用教程: https://edu.51cto.com/ ...
- Could not resolve placeholder 'CUST_INDUSTORY' in string value "${CUST_INDUSTORY}"
问题描述 项目中的资源文件中写了个properties文件,内容这样的 CUST_FROM=002 CUST_INDUSTORY=001 CUST_LEVEL=006 在springmvc配置文件中加 ...
- 玩转大数据之Apache Pig如何与Apache Lucene集成
在文章开始之前,我们还是简单来回顾下Pig的的前尘往事: 1,Pig是什么? Pig最早是雅虎公司的一个基于Hadoop的并行处理架构,后来Yahoo将Pig捐献给Apache(一个开源软件的基金组 ...