本文旨在提供一个CSS Media Query的基础入门教程。当HTML和CSS设计的样式因设备、浏览器分辨率差异导致显示问题时，Media Query能解决这一问题。从CSS 2.1开始，设计者可以针对不同设备定义样式。文中详细介绍了Media Query的语法，并通过两个示例演示了如何根据浏览器尺寸改变文字大小和网页内容结构，以实现响应式设计。
最近更新文章不及时,在此说声抱歉,关于 media query 在网络上实际已经有很多成型的文章,但是在编者查看之后,发现并没有特别基础的入门教程,所以今天上午特意去对知识进行了整理,于是就有了下面的这篇文章,希望在阅读过这篇文章之后,能够帮助到你,感谢.
������5月24是作者的生日呦,希望大家多多留言点赞!������
0.前言
很多时候,前期使用 HTML 和 CSS 设计的样式非常精美,但是经常会因为对方的设备,浏览器等的原因,分辨率达不到要求,最后导致用户看到的界面非常丑陋,很多内容位置发生改变.
为了解决这个问题,,从 CSS 2.1 开始就定义了各种媒体类型(如显示器,便携浏览器等),允许设计者针对不用的媒体设备进行不同的 CSS 样式设计.
1.语法
语法规则如下:
@media not|only 设备类型 [and 设备特性] *
在上面的语法中,[and 设备特性] 部分可以出现 0 ~ N 次,通过使用多个 [and 设备特性] 可以对多个设备特性进行匹配.
media query 语法格式中支持设备如下:
| - | - |
|---|---|
| all | 适用于所有的设备 |
| aural | 适用于语音和音频合成器 |
| braille | 适用于触觉反馈设备 |
| embossed | 适用于凸点文字(盲文)印刷设备 |
| handheld | 适用于小型或者手提设备 |
| 适用于打印机 | |
| projection | 适用于投影图像,如幻灯片 |
| sceen | 适用于计算机显示器(最常用的一个) |
| tty | 适用于使用固定间距字符格的设备,如电传打字机和终端. |
| tv | 适用于电视类设备 |
media query 语法格式中设备特性如下:
| 特性 | 合理的特性值 | 是否支持 max/min | 说明 |
|---|---|---|---|
| width | 带单位的长度值,如100px | 是 | 匹配浏览器宽度 |
| height | 带单位的长度值,如100px | 是 | 匹配浏览器高度 |
| aspect-ratio | 比例值,如 16/9 | 是 | 匹配浏览器的宽度值和高度值的比例 |
| device-width | 带单位的长度值,如100px | 是 | 匹配设备分辨率的宽度值 |
| device-height | 带单位的长度值,如100px | 是 | 匹配设备分辨率的高度值 |
| device-aspect-ratio | 比例值,如 16/9 | 是 | 匹配设备分辨率的宽度值与高度值的比例 |
| color | 整数值 | 是 | 匹配设备使用多少位的色深,比如真彩色是32,如果不是彩色设备则为 0 |
| color-index | 整数值 | 是 | 匹配色彩表中的颜色数 |
| monochrome | 整数值 | 是 | 匹配单色帧缓冲器中每像素的位(bit)数,如果不是单色设备,这个数值为 0 |
| resolution | 分辨率,如300dpi | 是 | 匹配设备的物理分辨率 |
| scan | 只能是 progressive 或者 interlace | 否 | 匹配设备的扫描方式,其中 progressive 代表逐行扫描, interlace 代表隔行扫描 |
| grid | 只能是 0 或 1 | 否 | 匹配设备是否基于栅格,1代表基于栅格,0代表其他类型 |
我们发现是不是很牛 X ,几乎设备所有物理特性我们都可以获取到,这样我们是不是也可以根据我们获取到的特性的内容,我们可以去针对不同的内容去进行设置了?那我们现在就根据上面的特性来去做几个简单的例子.
2.示例
首先我们先来看一个基础案例,就是我们通过我们改变浏览器的大小,来让我们浏览器中的文字也随之变化,给用户一种,我们的界面内容是可以随着浏览器的改变而改变的感觉.
2.1 案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body {
height:100%;
}
html{font-size:10px}
h2 {
font-size:1.9rem;
}
/*媒体查询*/
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){
html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){
html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){
html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){
html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){
html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
</style>
</head>
<body>
<div>
<h2>我是李先生</h2>
<span>李鹏</span>
<span>2016年05月24日</span>
</div>
</body>
</html>大家可以看到,我在代码中首先获取的 设备类型 是我们的屏幕.
之后我们通过 and 设备特性 对不同情况下的文字大小进行了修改,如下图.
@media screen and (min-width:321px) and (max-width:375px){
html{font-size:11px}}
2.2 案例二
让我们的网页中的内容结构随着我们的界面大小而不断改变,具体样例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*设置默认的 CSS 样式*/
.container{
text-align: center;
margin: 10px auto;
width: 750px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
text-align: left;
/*设置 HTML 组件的 width 属性包括边框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 300px;
height: 230px;
float: left;
}
div .main{
width: 450px;
height: 230px;
float: left;
/*这里不采用 clearfix 的用法了,直接 clear */
clear:right;
}
div .right{
width: 750px;
float: left;
}
@media screen and (min-width: 1000px){
.container{
text-align: center;
margin: 10px auto;
width: 960px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
/*设置 HTML 组件的 width 属性包括边框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 240px;
height: 240px;
float: left;
}
div .main{
width: 460px;
height: 240px;
float: left;
}
div .right{
width: 260px;
height: 240px;
float: left;
}
}
@media screen and (min-width: 180px) and (max-width: 500px){
.container{
text-align: center;
margin: 10px auto;
width: 450px;
}
.container>div{
border: 1px solid rgba(0,0,0,0.3);
/*设置 HTML 组件的 width 属性包括边框*/
box-sizing: border-box;
background-color: #96FF6B;
padding: 5px;
}
div .left{
width: 450px;
height: 240px;
float: left;
}
div .main{
width: 450px;
height: 240px;
float: left;
}
div .right{
width: 450px;
height: 240px;
float: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h2>我是你们的李先生呀</h2>
<ul>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
</ul>
</div>
<div class="main">
<h2>我是你们的李先生呀</h2>
<p>MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP MR_LP</p>
</div>
<div class="right">
<h2>我是你们的李先生呀</h2>
<ul>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
<li>MR_LP</li>
</ul>
</div>
</div>
</body>
</html>具体效果展示如下:
扫一扫
1万+
到【灌水乐园】发言
