@media响应式代码片段
分类:实例代码
分享一个代码片段,它实现了适配不同尺寸屏幕的功能。
代码实例如下:
body{zoom:3.2;} } @media only screen and (min-width: 768px) and (max-width: 1023px) { body{zoom:2.4;} } @media only screen and (min-width: 640px) and (max-width: 767px) { body{zoom:2;} } @media only screen and (min-width: 540px) and (max-width: 639px) { body{zoom:1.68;} } @media only screen and (min-width: 480px) and (max-width: 539px) { body{zoom:1.5;} } @media only screen and (min-width: 414px) and (max-width: 479px) { body{zoom:1.29;} } @media only screen and (min-width: 400px) and (max-width: 413px) { body{zoom:1.25;} } @media only screen and (min-width: 375px) and (max-width: 413px) { body{zoom:1.17;} } @media only screen and (min-width: 360px) and (max-width:374px) { body{zoom:1.125;} }
@media可以参阅css3 Media Queries媒体查询一章节。
@media响应式代码片段,这样的场景在实际项目中还是用的比较多的,关于@media响应式代码片段就介绍到这了。
@media响应式代码片段属于前端实例代码,有关更多实例代码大家可以查看。
