• 当前标签:媒体查询

程序开发 viewport 和 @media 媒体查询

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){...} 上面这段是设置横屏下的样式。 x vw = x% * (viewport width) x vh = x% * (viewport height) 推荐阅读: 什么是viewport,为啥需要viewport 移动前端开发之viewport的深入理解 移动前端第一弹:viewport详解 汇总30条移动Web开发技巧【看过都觉得:老有用了】 媒体查询使用方法@media

2017-05-17 23:49:56 54 0 0
阅读详情
  • 1
前往