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

最新推荐文章于 2024-04-16 00:00:00 发布

袁森Simon

最新推荐文章于 2024-04-16 00:00:00 发布

阅读量814

点赞数

分类专栏：移动端开发文章标签：媒体查询

本文链接：https://blog.csdn.net/simonyuan100/article/details/53771055

版权

移动端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

媒体查询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;
    }
}

袁森Simon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
media queries常用介绍及兼容性问题解决

媒体查询media queries，响应式布局的利器。本文分两块内容：一，常用介绍二，如何解决IE不支持的问题一、常用介绍如果有能力看官网（强烈推荐）的话，下面的介绍（常用的部分）可以不用看了，地址：https://www.w3.org/TR/css3-mediaqueries 1，常用的两种引入 a, 通过link media =“type and （attribut
复制链接

扫一扫