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 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
随机推荐
- 2018-8-10-win10-uwp-打开文件管理器选择文件
title author date CreateTime categories win10 uwp 打开文件管理器选择文件 lindexi 2018-08-10 19:16:50 +0800 2018 ...
- mysql权限修改记录
select user, password, host from mysql.user; GRANT ALL PRIVILEGES ON *.* TO 'root'@'147.114.169.197' ...
- android-启动另外一个Activity
启动另外一个Activity 在完成了上一节课的学习后,我们已经创建了一个带有text输入框和一个button的app. 在本课中,我们将在MainActivity类中添加SendButton的单击响 ...
- Python全栈开发：进度条
import sys import time for i in range(31): # 清空打印内容 sys.stdout.write("\r") # 控制输出样式 sys.st ...
- Python-数据类型内置方法(1)
目录 数字类型内置方法 整形(int) 浮点型(float) 字符串类型内置方法 优先掌握 需要掌握 了解 列表类型内置方法 优先掌握 需要掌握 数字类型内置方法 整形(int) 作用:年龄 定义:x ...
- 使用python和tableau对数据进行抓取及可视化
使用python和tableau对数据进行抓取及可视化 本篇文章介绍使用python抓取贷款及理财平台的数据,并将数据拼接和汇总.最终通过tableau进行可视化.与之前的python爬虫文章 不同之 ...
- WPF MVVM模式不用Prism
上一个例子使用了Prism.这个例子不用Prism.用自己封装的库LiuxhCSDLL,其实也差不多. 一.程序结构 二.界面代码以及界面效果 <Window x:Class="WPF ...
- PKU 百炼OJ 简单密码
http://bailian.openjudge.cn/practice/2767/ #include<iostream> #include <cmath> #include ...
- JS的第七种语言类型--symbol
今天浏览网页的时候发现,JS中有七种语言类型.我的内心???百度一下哪里来的第七种!! 好吧跟着来回顾一下JS的前6种undefined null boolean string numver obje ...
- （转载）JavaScript世界万物诞生记
一. 无中生有 起初,什么都没有.造物主说:没有东西本身也是一种东西啊,于是就有了null: 现在我们要造点儿东西出来.但是没有原料怎么办?有一个声音说:不是有null嘛?另一个声音说:可是null代 ...