使用@media实现不同分辨率的自适应布局
@media是CSS3中的一个规则，用于设置不同分辨率下的样式。通过使用@media规则，可以根据设备的屏幕尺寸和分辨率来应用不同的CSS样式。例如，可以使用@media规则为手机和平板电脑设置不同的字体大小和布局。这样，网站就可以在不同设备上自适应显示，提供更好的用户体验。此外，还可以使用@media规则为打印页面设置特定的样式，以便在打印时获得更好的效果。总之，@media是一个非常有用的工具，可以帮助我们更好地控制网站的外观和布局。
@media是CSS中媒介语法，可以根据不同分辨率，执行不同的CSS样式，可以达到自适应不同分辨率终端的方法。
下面菜鸡源码分享一套自用的@media方法，已经应用了很多套模板，100%好用。
@media使用方法
在使用@media之前，需要在页面中头部加上这段代码
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=0">
强制页面不要根据浏览器大小自动缩放。
下面是菜鸡源码自用的@media方法，复制下面这段代码到您的CSS尾部去。
@mediaonlyscreenand(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:0px1%;}}@mediaonlyscreenand(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:0px1%;}}@mediaonlyscreenand(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:0px1%;}}@media说明
现在的用户分辨率基本都集中在大于1366的宽屏分辨率，等于1366的笔记本分辨率，小于1366大于767的平板，和最后的小于479的手机端中，所以菜鸡源码分享的这套@media方法方法只处理了这4个分辨率，除此之外的分辨率基本都很少有人使用。
你们只需要按项目实际情况修改或添加.CSS样式名就可以，其实第一段是让宽度强制100%，第二段是隐藏，第三段是左右边距，第四代是文字超出长度省略号，第五段是50%的宽度，这些都是自适应中常用的写法。
