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 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
随机推荐
- JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
- CSS3 学习笔记(边框 背景 字体 图片 旋转等)
边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...
- 使用应用程序(Java/Python)访问MaxCompute Lightning进行数据开发
MaxCompute Lightning是MaxCompute产品的交互式查询服务,支持以PostgreSQL协议及语法连接访问Maxcompute项目,让您使用熟悉的工具以标准 SQL查询分析Max ...
- vue爬坑之input组件
本篇写给第一次用VUE写输入框组件的朋友们 正常情况我们vue2.0是怎么样取到input框的值的呢? 很简单只需要给input框设置v-model="val" 我们就能从data ...
- webstorm中使用git管理服务器上的代码——入门级
一.首先要确保电脑已经成功安装好git了.(记住git的安装位置) 二.这里需要给webstorm配置一下:依次点击:file –> Settings –> Version Control ...
- 基于OneMap的水利行业共享服务平台搭建步骤
今天上午再次学习Esri技术培训中心的“GIS服务共享与运维管理——之OneMap解决方案”课程,从中学习了OneMap的产品架构以及基于OneMap共享服务平台的搭建步骤.下面把其中水利行业的共享服 ...
- LOJ10157——皇宫看守（树形DP）
传送门:QAQQAQ 题意:在一个树上放置守卫,使每一个节点都至少有相邻一节点放置守卫,使最终经费最少 思路:树形DP 首先会想到没有上司的舞会,0表示不放守卫,1表示放守卫,但考虑到对于当前点不放守 ...
- elasticsearch 中文API river
river-jdbc 安装 ./bin/plugin --install jdbc --url http://xbib.org/repository/org/xbib/elasticsearch/pl ...
- 2018-8-10-VisualStudio-使用三个方法启动最新-C#-功能
title author date CreateTime categories VisualStudio 使用三个方法启动最新 C# 功能 lindexi 2018-08-10 19:16:52 +0 ...
- 网络结构解读之inception系列四：Inception V3
网络结构解读之inception系列四:Inception V3 Inception V3根据前面两篇结构的经验和新设计的结构的实验,总结了一套可借鉴的网络结构设计的原则.理解这些原则的背后隐藏的 ...