CSS3-----Media Queries

最新推荐文章于 2022-07-18 18:41:51 发布

ldaolong

最新推荐文章于 2022-07-18 18:41:51 发布

阅读量288

点赞数

分类专栏： CSS&HTML

本文链接：https://blog.csdn.net/ldaolong/article/details/84913378

版权

6 篇文章 0 订阅

订阅专栏

一,概念

Media Query:媒体查询.

CSS3中引入方式, demo:

二, Media Type

媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是 all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

1),link方法引入

2), xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3),@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head>>/head>中的<style>...</style>中引入，单这种使用方法在 ie6-7都不被支持.

demo: @import url("css/reset.css") screen;

4), @media引入

@media screen{

选择器{

属性：属性值；

}

三, Media Query

Media Query是CSS3 对Media Type的增强版，其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)，常用的特性w3c共列出来13种。

常用如下:

在Media Query中如果没有明确指定Media Type，那么其默认为all.

demo:

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" 
href="style.css" type="text/css" />

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
type="text/css" href="iphone4.css" />

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" 
type="text/css" />

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" 
type="text/css" />

更多demo可参考: https://www.w3.org/TR/css3-mediaqueries/#media1

四,兼容性

dd1f503e-835f-3b63-81ae-fec17d2ccccb.png (490×200)

参考: https://www.w3cplus.com/content/css3-media-queries

关注

专栏目录