Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > 网站媒体查询@media详解

网站媒体查询@media详解

浏览: 作者:Datehoer 发布日期:2020-11-19 23:01:39 来源: 原创

通过使用 @media 查询,可以针对不同的媒体类型来定义不同的样式。

@media 可以针对不同的屏幕尺寸来设置不同的样式,特别是如果需要设置设计响应式的页面,@media 是非常有用的。

当重置浏览器大小时,页面也会根据浏览器的宽度和高度来进行页面的重新渲染。

用法其实非常简单

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

类似于上面的小例子,在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查询
例子比较简单,不过比较实用,如果有什么不会的可以在评论区留言,我会在看到的时候进行回答。


 


版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/55.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!