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. C++STL之Vector向量详解,用法和例子 一起学习 一起加油

                                                                                    C++ STL之vector用法总结 1 ...

  2. 使用+Leapms查看线性规划的单纯形表,itsme命令

    知识点 +Leapms的itsme命令 +Leapms的直接代数模型 查看线性规划直接代数模型的单纯形表和计算过程 +Leapms的直接代数模型 +Leapms的直接代数模型十分简单,只是使用了s.r ...

  3. 内核mailbox

    只罗列增加取走消息: static int add_to_rbuf(struct mbox_chan *chan, void *mssg) { int idx; unsigned long flags ...

  4. Virtual Box虚拟机Ubuntu系统安装及基本配置

    Linux简介 什么是 Linux? Linux:世界上不仅只有一个 Windows 操作系统,还有 Linux.mac.Unix 等操作系统.桌面操作系统下 Windows 是霸主,而 Linux ...

  5. Asp.NetCore轻松学-实现一个轻量级高可复用的RabbitMQ客户端

    前言 本示例通过对服务订阅的封装.隐藏细节实现.统一配置.自动重连.异常处理等各个方面来打造一个简单易用的 RabbitMQ 工厂:本文适合适合有一定 RabbitMQ 使用经验的读者阅读,如果你还没 ...

  6. Java基础系列-equals方法和hashCode方法

    原创文章,转载请标注出处:<Java基础系列-equals方法和hashCode方法> 概述         equals方法和hashCode方法都是有Object类定义的. publi ...

  7. vue.js之动画篇

    本文引入类库的方式均采用CND的方式,可直接复制代码到编辑器中学习和测试 不使用动画切换元素 <div id="app"> <input type="b ...

  8. Memcached的安装配置与测试

    https://www.cnblogs.com/edisonchou/p/3855969.html

  9. webstorm 2018.2.3 cmd+w无法关闭文件

  10. appium+python搭建自动化测试框架_Appium元素定位(二)

    Appium元素定位: 工具:Android\android-sdk\tools    uiautomatorviewer.bat 1. id定位: self.driver.find_element_ ...