您现在的位置是:首页 >>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代码
上一篇:div 如何防止图片太大被撑开
下一篇:box-sizing 属性
随机图文
文章评论
评论加载中...
|