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. springboot~mogodb多条件拼接

    起因 当前我们使用mongodb进行查询时,有时我们的条件是分块生成的,它可能来自一个列表里,我们的条件需要根据列表去返回数据,这里有个问题,如果遍历列表,然后每次都去从mongodb里查询数据 ,这 ...

  2. Python:用 peewee 框架连接 SQL Server

    Peewee 默认支持 Sqlite.MySQL.PostgreSQL 三种数据库,如果要使用其他数据库,需要同时安装扩展库.比如 SQL Server,需要安装 peewee-mssql. 但是安装 ...

  3. NTP服务和DNS服务(week3_day3)--技术流ken

    NTP时间服务器 作用:ntp主要是用于对计算机的时间同步管理操作. 时间是对服务器来说是很重要的,一般很多网站都需要读取服务器时间来记录相关信息,如果时间不准,则可能造成很大的影响. 部署安装NTP ...

  4. 🕵️ 如何绕过 BKY 对 script 的屏蔽

    Conmajia January 20, 2019 警告 这是试验,警告个屁,请不要多多尝试用它做多余的事. 果不其然,这篇文章立刻被移出主页了,我就说嘛,BKY 哪儿会那么包容和坦然呢? 原文 do ...

  5. Eureka的工作原理以及它与ZooKeeper的区别

    1.Eureka 简介: Eureka 是 Netflix 出品的用于实现服务注册和发现的工具. Spring Cloud 集成了 Eureka,并提供了开箱即用的支持.其中, Eureka 又可细分 ...

  6. SpringMVC之入门程序

    SpringMVC之入门程序——使用浏览器展示商品数据 springMVC执行流程(图片来源:https://www.jianshu.com/p/8a20c547e245) 1.创建pojo(商品实体 ...

  7. Vue 单选框与单选框组 组件

    radio组件 v-model  : 通过当然绑定的值与input上的value值来确定当前选中项. 在父作用域中通过active设置当前默认选中项,如果选中项发生改变后通过input事件通知传递到父 ...

  8. Web前端 web的学习之路

    零基础学习web前端的顺序 ( 转载自:https://blog.csdn.net/weixin_41780944/article/details/83751632) 怎么开始学习两条路:自学或者找培 ...

  9. 【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(2)!

    前言- 明确了项目目录的结构,但是结构什么的也太"抽象"了. 本篇开始上代码! 模型的绘制- 前几天的学习中,live2d的绘制有了一些了解了,在Android端使用OpenGL ...

  10. 自学MongoDB(1)

    MongoDB是nosql(非关系型数据库)中的一种,面向文档的数据库,介于传统的结构化数据库(关系型数据库)与非关系型数据库(文件储存)之间的一种,具有数据结构非常松散和非常灵活的特点;常用于存储分 ...