响应式布局媒体查询

老牧童 • 2024-01-06 18:15 • 未分类 • 阅读 71

大家好，欢迎来到IT知识分享网。

响应式布局（responsive web design）指的是在网页开发过程中针对不同设备
开发一套网站，然后根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕
定向等）自适应地显示不同布局。响应式布局的核心是媒体查询。媒体查询
（media query）是获取用户行为和设备环境、然后提供相应的css规则的过程

的简称。媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

1.目录结构

响应式布局媒体查询

2.index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--link元素中的CSS媒体查询-->  
    <link rel="stylesheet" media="screen and (max-width:500px)" href="style.css">  
    <style>  
        .mystyle1 {  
            background-color:lightgreen;  
        }  
  
        .mystyle2 {  
            background-color: #64989a;  
        }  
  
        /*样式表中的CSS媒体查询*/  
        @media screen and (max-width: 500px) {  
            .mystyle1 {  
                background-color:lightblue;  
            }  
        }  
    </style>  
</head>  
<body>  
<p>当浏览器窗口的宽度小于 500 像素时，背景颜色会有变化。</p>  
<div class="mystyle1">徐同保</div>  
<div class="mystyle2">徐同保</div>  
  
</body>  
</html>

3.style.css

.mystyle2 {
    background: red !important;
}

4.运行结果

大于500px时

响应式布局媒体查询

小于500px时

响应式布局媒体查询

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/22343.html

响应式布局 媒体查询

相关推荐

发表回复

响应式布局媒体查询