css如何设置div随着窗口大小变换

小编给大家分享一下css如何设置div随着窗口大小变换，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都做网站、广饶网络推广、重庆小程序开发、广饶网络营销、广饶企业策划、广饶品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供广饶建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

css设置div随着窗口大小变换的方法：首先新建一个div，并设置初始化样式；然后给div添加transition；接着添加css3的媒体查询；最后改变窗口大小查看效果即可。

设置div随窗口大小改变而发生样式变换，可以使用css3的媒体查询来实现！

css设置div随着窗口大小变换

1、新建一个div，设置初始化样式

给div添加transition，在样式改变时，会具有动画效果。

.app{
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    transition: all .5s;
}
<div class="app">app</div>

2、添加媒体查询

分别在屏幕宽度为300、250、200、150时，设置div为不同的样式。

@media (max-width: 300px){
    .app{
        height: 50px;
    }
}
@media (max-width: 250px){
    .app{
        width: 50px;
    }
}
@media (max-width: 200px){
    .app{
        border-radius: 10px;
    }
}
@media (max-width: 150px){
    .app{
        border-radius: 50px;
    }
}

3、改变窗口大小，查看效果：

以上是“css如何设置div随着窗口大小变换”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

本文标题：css如何设置div随着窗口大小变换
文章起源：https://www.cdcxhl.com/article40/podgho.html

成都网站建设公司_创新互联，为您提供品牌网站设计、网站建设、网站内链、网站设计公司、品牌网站制作、网站排名

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联