响应式布局之媒体查询功能
Posted Arvin-ma
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局之媒体查询功能相关的知识，希望对你有一定的参考价值。
实现响应式布局有很多方法：
媒体查询功能：Media Queries就是其中之一
media用来指定特定的媒体类型，例如屏幕（screen）和打印（print）和支持所有媒体介质的all
如果要在head部分引用，形式如下：
- <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
- <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
- <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
当然还可以在<style></style>中引用：
- <style type="text/css">
- @media screen{
- 选择器{
- 属性：属性值；
- }
- }
- </style>
通过一个简单的例子就明白了怎么媒体查询了：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>media Queries</title>
- <style>
- div{
- width: 600px;
- height: 600px;
- background-color: red;
- }
- @media (max-width: 800px) {
- div{
- width:500px;
- height:500px;
- background-color:yellow;
- }
- }
- @media (max-width: 500px) {
- div{
- width:300px;
- height:300px;
- background-color:blue;
- }
- }
- </style>
- <body>
- <div></div>
- </body>
- </html>
例子很简单，max-width为品目显示最大宽度，因此：
当屏幕宽度大于800时，显示一个600*600的大红块
小于或等于800时，显示一个500*500的黄色div
同理，屏幕宽度小于等于500时，显示一个300*300的蓝色div
效果如图：
1.屏幕宽度为：1366px全屏状态
2.屏幕宽度为611px
3.屏幕宽度为440px
同理：也可以用min-width表示当屏幕宽度大于或等于xxxpx时的状态
或者采用screen and (min-width:600px) and (max-width:900px)结合多个媒体查询
以上是关于响应式布局之媒体查询功能的主要内容，如果未能解决你的问题，请参考以下文章