网页的伸缩兼容pc,移动端

我们经常会遇到这样的问题,如何让一个网页兼容pc端、移动端, 这样可以减少很多文件。css里面为我们提供了解决方案 @media screen and () {}

<style type="text/css"> #div{ width: 600px; height: 600px; } .div1{ background: pink; width: 200px; height: 200px; } .div2{ background: skyblue; width: 200px; height: 200px; } .div3{ background: wheat; width: 200px; height: 200px; } @media screen and (max-width: 1060px) { #div{ width: 600px; height: 600px; display: flex; justify-content: center; align-items: center; } } @media screen and (max-width: 640px) { .div2{ margin-top: 100px; } } </style> <div id="div"> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> </div>

代码效果即是上面的div的效果 php留言板--> html 实训