本篇文章为大家展示了如何使用@media设置不同分辨率的css样式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
宁陕网站建设公司创新互联建站,宁陕网站设计制作,有大型网站制作公司丰富经验。已为宁陕成百上千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的宁陕做网站的公司定做!
在css中,可以使用“@media”规则来设置不同分辨率的样式。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 查询的语法:
@media mediatype and|not|only (media feature) { CSS-Code; }
例:
/* 设置了浏览器宽度小于1600px时的样式 */ @media screen and (max-width: 1600px) { .select2-container{ width:328px !important; } #address{ width:calc(37% - 3px) !important; } } /* 设置了浏览器宽度小于1367px时的样式 */ @media screen and (max-width: 1367px) { .select2-container{ width:275px !important; } #address{ width:calc(36% + 3px) !important; } }
可以看出:@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
实例:
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc { height: 300px; border: 1px solid #000; margin: 0 auto } //可以去掉边框 @media screen and (min-width: 1201px) { .abc { width: 1200px } } /* css 注释说明:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ @media screen and (max-width: 1200px) { .abc { width: 900px } } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ @media screen and (max-width: 900px) { .abc { width: 200px; } } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ @media screen and (max-width: 500px) { .abc { width: 100px; } } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="abc">DIVCSS5实例:我这个DIV宽度会随浏览器宽度变化哦,试试改变浏览器宽度</div> </body> </html>
上述内容就是如何使用@media设置不同分辨率的css样式,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
分享文章:如何使用@media设置不同分辨率的css样式
URL链接:https://www.cdcxhl.com/article10/jdiggo.html
成都网站建设公司_创新互联,为您提供网站建设、品牌网站设计、、外贸网站建设、微信公众号、网站营销
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联