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 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
随机推荐
- React在componentWillMount中请求接口数据结束后再执行render
1.在getInitialState中初始化isloading,初始值false getInitialState() { return { editionid: '', isloading:false ...
- P++ 1.0.5
#include<bits/stdc++.h> #define begin { #define end } #define while while( #define if if( #def ...
- Ubuntu clion下载及激活
1.下载 方法:去官网下载clion https://www.jetbrains.com/clion/download/#section=linux 或者使用我上传的百度网盘链接: https:// ...
- 使用R进行数据提取
使用R进行数据提取 数据提取是数据分析日常工作中遇到最多的需求,本篇文章介绍如何通过R按特定的维度或条件对数据进行提取,完成数据提取需求. 读取并创建数据表 首先第一步是读取数据,并创建名称为loan ...
- js 实现页面局部（或图片）放大功能(vue)
方法: adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.style ...
- 用JS把数组内的日期转换为星期
核心代码 给定日期是星期几,应把字符串转为Date: new.Date('2017-12-30').getDay(); // 返回0,表示星期天,1:星期一…… 案例: 需求: 调用此方法 funct ...
- Python学习day44-数据库(单表及多表查询)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- elasticsearch 中文API 基于查询的删除(九)
基于查询的删除API 基于查询的删除API允许开发者基于查询删除一个或者多个索引.一个或者多个类型.下面是一个例子. import static org.elasticsearch.index.que ...
- P1080(python 高精度）
https://www.luogu.org/problem/P1080 n=int(input()) s=input().split() S=int(s[0]) T=int(s[1]) a=[] fo ...
- NOIP2018崩崩记
比赛前,做做往年的题目,嗯,似乎都很水,400+绝对没问题,如果完全发挥,起码500+. 然而-- Day0 这天是运动会,信息学的同学们向老师请假来机房. 然后我在机房里刷往届的题目,信心倍增. 最 ...