您现在的位置是:首页 >>CssCss

@media 查询

zhang2021-03-08 11:04:16【Css】人已围观

简介:
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大...


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


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


当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

例一:
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}


例二:
使用 @media 查询来制作响应式设计
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}

.gridmain {
width:100%;
}

.gridright {
width:100%;
}
}


一般这个@media screen and(max - width: 300px) {}样式要放在css样式表的最下面,不然会被相同样式覆盖。放在PC端CSS样式下面,要不然不起作用,显示的还是PC端的CSS代码









文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:88篇文章
  • 微信公众号:扫描二维码,关注我
在线客服
在线咨询:
点击这里给我发消息技术支持
点击这里给我发消息技术支持
点击这里给我发消息技术支持
点击这里给我发消息技术支持
电话咨询:
电话咨询
156-2913-6039