media queries常用介绍及兼容性问题解决

来源：互联网发布：魔方数据是什么编辑：程序博客网时间：2024/04/28 02:23

媒体查询media queries，响应式布局的利器。
本文分两块内容：
一，常用介绍
二，如何解决IE不支持的问题

一、常用介绍
如果有能力看官网（强烈推荐）的话，下面的介绍（常用的部分）可以不用看了，地址：https://www.w3.org/TR/css3-mediaqueries
1，常用的两种引入
a, 通过link media =“type and （attribute）”
b, css 中 @media type and （attribute）
注：type： screen print all … attribute: max-width, min-width,… 多个attribute 可以再次and (attribute)

2, 常用的 type 和 attribute
媒体查询常用在多屏自适应，所以type 上用的多的screen，如果没有特别限定的可以用all 意所有类型下都生效
attribute 常用的：max-width: 数值+单位表示最大长度以内生效，同理还有min-width 意最小长度范围以内生效
两者可以同时使用以实现两个边界以内的屏幕宽下生效代码。

二、IE 兼容性问题

ie 低版本，不支持。
项目需要兼容ie7+ github 上找了个插件 https://github.com/scottjehl/Respond 可以实现兼容IE6+
谈下遇到的问题：内部样式，按照使用介绍，将对应的js文件放在样式后面，怎么也出不来效果，后面改为外部样式引入，就解决了问题。

附：常用介绍demo

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>    <link rel="stylesheet" media="screen" href="css/1.css"/>    <link rel="stylesheet" media="print" href="css/2.css"/>    <link rel="stylesheet" href="css/3.css"/>    <link rel="stylesheet" href="css/4.css"/>    <link rel="stylesheet" href="css/5.css"/>    <link rel="stylesheet" href="css/6.css"/>    <link rel="stylesheet" href="css/7.css"/>    <title>media Query</title>    <style>        p{text-align: center;}    </style></head><body>    <p>小雪日戏题</p>    <p>张登</p>    <p>甲子徒推小雪天，</p>    <p>刺梧犹绿槿花然；</p>    <p>融合长养无时歇，</p>    <p>却是炎洲雨漏偏。</p><p style="margin-top:100px;font-size:12px;">if you want to know more,please come here: <a href="https://www.w3.org/TR/css3-mediaqueries/">https://www.w3.org/TR/css3-mediaqueries/</a></p></body></html>

1.css

p:nth-child(1){    color:#f00;    font-weight:600 ;}

2.css

p:nth-child(2){    color:#f0f;}

3.css

@media screen{    p:nth-child(3){        color:#727486;    }}

4.css

@import "3.css";p:nth-child(4){    color:#0f0;}

5.css

@media all and (min-width:500px){    p:nth-child(5){        color: #7093ff;    }}@media all and (max-width:1000px) and (min-width:500px){    p:nth-child(5){        color: #ff8696;    }}

6.css

@media not print{    p:nth-child(6){        color: #ffb778;    }}

7.css

@media all and (orientation: portrait){    p{        font-family: "黑体";        font-size:32px;    }}@media all and (orientation: landscape){    p{        font-family:"宋体";        font-size:16px;    }}

0 0