媒体查询—引入资源

一、通俗的理解

1.当用户使用不同尺寸的屏幕查看，呈现的样式不同，并且各自的样式比较复杂，那么就可以把不同尺寸样式单独写一个文件，然后使用
<link rel="stylesheet" href="">进行引入

二、示例

例如：当屏幕小于800px，一行只显示一个盒子，屏幕大于等于800px，一行显示两个盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询-引入资源</title>
    <link rel="stylesheet" href="./css/small.css" media="screen and (max-width: 799px)">
    <link rel="stylesheet" href="./css/large.css" media="screen and (min-width: 800px)">
</head>
<body>
    <div></div>
    <div></div>

</body>
</html>

样式

#small.css
div{
    width: 100%;
    height: 200px;

}

div:nth-child(1){
    background-color: coral;
}

div:nth-child(2){
    background-color: skyblue;
}

#large.css
div {
    float: left;
    width: 50%;
    height: 200px;
}

div:nth-child(1) {
    background-color: coral;
}

div:nth-child(2) {
    background-color: skyblue;
}

三、效果

image

image

posted @ 2023-07-26 15:48  弩哥++  阅读(13)  评论(0)  编辑  收藏  举报