@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响应式代码片段属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容