通过使用 @media 查询,可以针对不同的媒体类型来定义不同的样式。@media 可以针对不同的屏幕尺寸来设置不同的样式,特别是如果需要设置设计响应式的页面,@media 是非常有用的。当重置浏览器大小时,页面也会根据浏览器的宽度和高度来进行页面的重新渲染。 用法其实非常简单

@media screen and (max-width:1000px) {.topbox .logo { display: none; } }

类似于上面的小例子,在css中进行设置,判断浏览器的大小是否大于1000px,如果小于,那么执行里面的内容,这就可以达到你网页大小不同来让页面显示的不同了。
不过其实这种方法比较适合小型网站,大型网站都是可以开发出各类适配的,比如说淘宝,比如说京东等等吧,人家为了用户体验做到了极致,而我们这些小型站,肯定还是要稍微差一些的。
<link rel="stylesheet" media="screen and (max-width:1400px)" href="./css/public2.css">
<link rel="stylesheet" media="screen and (max-width:1000px)" href="./css/public3.css">

最简单的就是如上面例子那样,不同的页面宽度调用不同的css文件,这样就达到了自适应的效果了。推荐阅读:菜鸟教程里的css@media查询
例子比较简单,不过比较实用,如果有什么不会的可以在评论区留言,我会在看到的时候进行回答

本文作者:博主:     文章标题:网站媒体查询@media详解
本文地址:https://zjzdmc.top/jsfx/55.html     
版权说明:若无注明,本文皆为“Datehoer的Blog-个人博客-技术分享”原创,转载请保留文章出处。
最后修改:2021 年 04 月 20 日 09 : 23 AM
如果觉得我的文章对你有用,请随意赞赏