@media是CSS中媒介语法,可以根据不同分辨率,执行不同的CSS样式,可以达到自适应不同分辨率终端的方法。
下面精准像素分享一套自用的@media方法,已经应用了很多套模板,100%好用。
@media使用方法
在使用@media之前,需要在页面中头部加上这段代码
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
强制页面不要根据浏览器大小自动缩放。
下面是精准像素自用的@media方法,复制下面这段代码到您的CSS尾部去。
@media only screen and (max-width: 1366px) { .css{ width:100% !important; box-sizing: border-box; } .css{ display:none !important; } .css{ padding-left:1%; padding-right:1%; } .css{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .css{ width:48%; float:left; margin:0px 1%; } } @media only screen and (min-width: 767px) and (max-width: 1000px){ .css{ width:100% !important; box-sizing: border-box; } .css{ display:none !important; } .css{ padding-left:1%; padding-right:1%; } .css{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .css{ width:48%; float:left; margin:0px 1%; } } @media only screen and (max-width: 479px) { .css{ width:100% !important; box-sizing: border-box; } .css{ display:none !important; } .css{ padding-left:0.5%; padding-right:0.5%; } .css{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .css{ width:98%; float:left; margin:0px 1%; } }
@media说明
现在的用户分辨率基本都集中在大于1366的宽屏分辨率,等于1366的笔记本分辨率,小于1366大于767的平板,和最后的小于479的手机端中,所以精准像素分享的这套@media方法方法只处理了这4个分辨率,除此之外的分辨率基本都很少有人使用。
你们只需要按项目实际情况修改或添加.CSS样式名就可以,其实第一段是让宽度强制100%,第二段是隐藏,第三段是左右边距,第四代是文字超出长度省略号,第五段是50%的宽度,这些都是自适应中常用的写法。
本文转载自:精准像素:11px.cn ,感谢作者分享实用知识