媒体查询--自适应屏幕大小

介绍：

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法：

@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

mediatype：媒体类型

all 所有设备
print 打印机
screen 电脑屏幕、平板、手机
speech 发声器

关键字

and：可以将多个媒体特性连接到一起，且
not：排除某个媒体类型，非
only：指定某个特定的媒体类型

media feature：媒体特性

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

实践1：
注意：为了防止混乱，媒体查询按照从小到大或者从大到小的顺序来写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><div></div><style>div{height: 100px;}/* 屏幕小于540px 背景红色 */@media screen and (max-width: 539px){div{background-color:red;}}/* 屏幕大于于540px 小于 800px 背景蓝色 */@media screen and (min-width: 540px){div{background-color:blue;}}/* 屏幕大于800px 背景粉色 */@media screen and (min-width: 800px){div{background-color:pink;}}</style>
</body>
</html>

元素动态变化：

媒体查询配合rem

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
</head><body><div>测试</div><style>div{height: 1rem;font-size: 0.5rem;background-color: green;color: #fff;}@media screen and (max-width: 539px){html{font-size: 50px;}}@media screen and (min-width: 540px){html{font-size: 80px;}}@media screen and (min-width: 800px){html{font-size: 100px;}}</style></body>
</html>

媒体查询--自适应屏幕大小相关推荐

html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
媒体查询中“屏幕”和“仅屏幕”之间有什么区别？
本文翻译自:What is the difference between "screen" and "only screen" in media queries ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
VMware安装的虚拟机窗口如何自适应屏幕大小
为了方便在windows开发机器上搭建并运行liunx环境,我们常常会用到VMware,只要准备好要安装的linux镜像文件(.iso)就可以通过VMware Workstation新建一个虚拟机快速 ...
使用C# winform 制作一个按钮可自适应屏幕大小的简易加减乘除计算器
一:成果物不多展示,,,我们开始吧.. 二: 窗体包含内容 2.1 显示屏部分组成显示屏部分由两个组件组成,一个是方便操作的panel控件位于顶部,且为了使其显示屏在改变窗体大小时一直位于 ...
js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
js页面自适应屏幕大小_Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
css --- 使用媒体查询当屏幕宽度小于某个值时,隐藏掉某个类
Bootstrap提供了一个封装好的类: .hidden-xs: 当屏幕宽度<768px时隐藏 .hidden-sm: 当屏幕768px <= 宽度<992px时隐藏 .hidden ...

媒体查询--自适应屏幕大小

介绍：

语法：

元素动态变化：

媒体查询--自适应屏幕大小相关推荐

最新文章

热门文章