CSS实现响应式布局的方法

发布时间:2020-01-13 (阅读第 423 次)
用CSS实现响应式布局


响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局


要用的就是CSS中的没接查询,下面就介绍一下怎么运用:


使用@media 的三种方法


1.直接在CSS文件中使用:

@media 类型 and (条件1) and (条件二){
    css样式
}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}


2.使用@import导入

@import url("css/moxie.css") all and (max-width:980px);


3.也是最常用的方法--直接使用link连接,media属性用于设置查询方法

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>响应式</title>
    <link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<body>
    <div class="header">头部</div>
    <div class="main clearfix">
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">底部</div>
</body>
</html>


您的昵称: