媒体查询—引入资源

最新推荐文章于 2024-07-19 08:46:25 发布

弩哥++

最新推荐文章于 2024-07-19 08:46:25 发布

阅读量70

点赞数

分类专栏： CSS 文章标签：媒体

本文链接：https://blog.csdn.net/heiwa110/article/details/131951445

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、通俗的理解

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;
}

三、效果

弩哥++

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
媒体查询—引入资源

一、通俗的理解1.当用户使用不同尺寸的屏幕查看，呈现的样式不同，并且各自的样式比较复杂，那么就可以把不同尺寸样式单独写一个文件，然后使用<link rel="stylesheet" href="">进行引入二、示例例如：当屏幕小于800px，一行只显示一个盒子，屏幕大于等于800px，一行显示两个盒子<!DOCTYPE html><html lang...
复制链接

扫一扫