通过媒体查询引入不同的资源文件

最新推荐文章于 2024-02-20 16:58:35 发布

I like study.

最新推荐文章于 2024-02-20 16:58:35 发布

阅读量608

点赞数 1

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/rj2017211811/article/details/104158728

版权

Web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

假设body里面有两个div，当屏幕宽度>640px的时候，让屏幕一行显示两个div，当屏幕宽度>320px的时候，让屏幕一行显示一个div

<body>
	<div></div>
	<div></div>
</body>

style320.css

div{
    width: 100%;
    height: 100px;

}
div:nth-child(1){
    background-color: #31A6FD;
}
div:nth-child(2){
    background-color: #222222;
}

style640.css

div{
    width: 50%;
    height: 100px;
    float: left;

}
div:nth-child(1){
    background-color: #31A6FD;
}
div:nth-child(2){
    background-color: #222222;
}

通过媒体查询引入两个css文件

<link rel="stylesheet"  href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet"  href="style640.css" media="screen and (min-width:640px)">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

I like study.

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过媒体查询引入不同的资源文件

假设body里面有两个div，当屏幕宽度>640px的时候，让屏幕一行显示两个div，当屏幕宽度>320px的时候，让屏幕一行显示一个div<body> <div></div> <div></div></body>style320.cssdiv{ width: 100%; height...
复制链接

扫一扫