其他分享
首页 > 其他分享> > 关于css3媒体查询

关于css3媒体查询

作者:互联网

CSS3媒体查询以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式,最常用的查询是处理视口高度和宽度的查询,其次便是宽高比例查询。CSS3媒体查询跟bootstarp的响应式特别相似。

 

媒体类型:
  all:适用于所有设备。
  print:适用于在打印预览模式下在屏幕上查看的分页材料和文档。
  screen:主要适用于屏幕。
  speech:主要适用于语音合成器。

 

媒体功能:
  width:可视化宽度
  height :可视化高度
  aspect-ratio:视口的宽高比宽高比
  orientation:视口的方向
  resolution:输出设备的像素密度
  prefers-reduced-transparency:透明度设置
  grid:设备是否使用网格或位图屏幕
  update:输出设备修改内容外观的频率
  overflow-block:输出设备如何处理沿块轴溢出视口的内容
  overflow-inline:可以滚动沿着内联轴溢出视口的内容

 

eg:


@media screen and (min-width: 768px) { //常规用法 }


@media screen and (max-aspect-ratio: 1200/1000) { //宽高比常规用法 }


@media screen and (min-width: 768px) and (max-width:1024px) { //用and结合多条件 }


@media screen and (max-aspect-ratio: 1200/1000) and (min-aspect-ratio: 700/1000){ //宽高比结合多条件 }

 

 

标签:css3,ratio,媒体,screen,查询,视口,aspect,宽高比
来源: https://www.cnblogs.com/comedy/p/12942058.html