Media query 详解

最新推荐文章于 2024-04-17 22:38:09 发布

MR_LP

最新推荐文章于 2024-04-17 22:38:09 发布

阅读量1.6w

点赞数 4

分类专栏： HTML 学习 H5 学习笔记文章标签： html css 阅读设计网络

本文链接：https://blog.csdn.net/MR_LP/article/details/51496414

版权

最近更新文章不及时,在此说声抱歉,关于 media query 在网络上实际已经有很多成型的文章,但是在编者查看之后,发现并没有特别基础的入门教程,所以今天上午特意去对知识进行了整理,于是就有了下面的这篇文章,希望在阅读过这篇文章之后,能够帮助到你,感谢. ��5月24是作者的生日呦,希望大家多多留言点赞!��0.前言很多时候,前期使用 HTML 和 CSS 设计的样式非

摘要由CSDN通过智能技术生成

最近更新文章不及时,在此说声抱歉,关于 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	适用于小型或者手提设备
print	适用于打印机
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;
            }
            /*媒体查询*/

最低0.47元/天解锁文章

MR_LP

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
4
评论
Media query 详解

最近更新文章不及时,在此说声抱歉,关于 media query 在网络上实际已经有很多成型的文章,但是在编者查看之后,发现并没有特别基础的入门教程,所以今天上午特意去对知识进行了整理,于是就有了下面的这篇文章,希望在阅读过这篇文章之后,能够帮助到你,感谢. ��5月24是作者的生日呦,希望大家多多留言点赞!��0.前言很多时候,前期使用 HTML 和 CSS 设计的样式非
复制链接

扫一扫