viewport 和 @media 媒体查询

黄良钵

分类: 程序开发 55 0

viewport:视口,视觉窗口,显示区域。

概念网上有很多了,一般来说常用的就是这一段代码:

<meta name="viewport" content= "initial-scale=1,maximum-scale=1,user-scalable=no">

最好也加上这句:

<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

@media 媒体查询

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

例如:

@media screen and (min-aspect-ratio:1/1) and (max-height:440px){...}
min-aspect-ratio当输出设备中的页面可见宽度与高度比率大于或等于1:1时。
@media screen and (min-aspect-ratio:1/1) and (orientation: landscape){...}
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
@media、viewpoint、媒体查询

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “viewport 和 @media 媒体查询”

Loading...