aspec-ratio

  • 取值:value (x/y)
  • 接收min/max前缀:是

aspect-ratio描述了输出设备目标显示区域的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

device-aspect-ratio

这个和aspect-ratio很类似,描述的是输出设备的宽高比。该值包含两个以/分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

这两个用于媒体查询可以解决许多宽高比例较大的安卓机器的适配问题。
比如这样:

/*宽屏Android*/
@media only screen and (min-aspect-ratio: 6/10){
.packetTop {
position: relative;
margin: 18% 11% 20px;
}
.packetBot {
display: none;
position: relative;
margin: 10% 11% 20px;
}
}

  

原文:https://www.cnblogs.com/lijie33402/p/4656838.html

【CSS】利用宽高比例的媒体查询的更多相关文章

  1. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  4. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  5. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  6. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  7. 简单使用媒体查询@media

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 那媒体查询该如何使用呢? 一.铺垫 1.首先我们在使用 @media 的时候需要 ...

  8. 移动WEB开发中媒体查询里的width, device-width, resolution

    /*1.width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px. 当设置viewport width=device-width时,对应的媒体查询中width的值 ...

  9. 媒体查询的应用以及在css3中的变革

    CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...

随机推荐

  1. 接口自动化:HttpClient + TestNG + Java(一) - 接口测试概述+自动化环境搭建

    1.1 接口测试简介 1.1.1 什么是接口测试 开始学习接口自动化测试之前,我们先要来了解什么是接口,以及什么是接口测试. 我们都知道,测试从级别上划分可以分为 组件测试 集成测试 系统测试 验收测 ...

  2. Python实战171202元组访问

    学生信息系统中数据为固定格式: (名字,年龄,性别,邮箱地址,......) 学生数量很大为了减小存储开销,对每个学生信息用元组表示: ('jim',18,'male','jim8765@gmail. ...

  3. 浅谈Promise

    学习过JavaScript的人都知道,JavaScript是单线程作业,这样会有一个很大的缺陷,所有的Ajax,浏览器事件等,都是通过异步去完成.所谓的同步和异步最大的区别无非就是在于同步会阻塞后续代 ...

  4. Spring异常分析

    异常报错 2019-01-14 10:40:18.427 ERROR 11776 --- [ost-startStop-1] o.s.b.w.e.t.TomcatStarter : Error sta ...

  5. C#属性标记Order执行顺序备忘录

    部分Attribute有实现IOrderedFilter,其执行顺序机制例子: /// <summary> /// 密码修改 /// </summary> /// <pa ...

  6. Servlet常用的接口和类

    使用接口和类的作用:Servlet也是依靠继承父类和实现接口来实现的.使用Servlet必须要引入两个包:javax.servlet和javax.servlet.http.所有的Servlet应用都是 ...

  7. 1.3 使命的完成者Command

    为什么要从Command说起? 因为Command才是Cesium源码中真正意义的绘制细胞.

  8. Parcelable 小记

    Parcelable 类,接口类,用于数据的序列化封装.常见的Bundle,Intent类都实现了该类.   实现该类需要实现writeToParcel和describeContents方法,最后还需 ...

  9. First Show

    随便写写,记录美好生活 博客的内容主要是关于java后台开发所涉及到技术栈的学习记录

  10. 记一次使用SimpleDateFormat 格式化时间时遇到的问题

    网上的使用方法一大堆,我就不再介绍了,就写一下自己遇到的问题. 先来实现一下获取当前时间: SimpleDateFormat simpleDateFormat =new SimpleDateForma ...