【CSS】利用宽高比例的媒体查询
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】利用宽高比例的媒体查询的更多相关文章
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- 移动设备上的媒体查询 CSS media queries for mobile device
CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...
- CSS 媒体查询 响应式
媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
- 简单使用媒体查询@media
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 那媒体查询该如何使用呢? 一.铺垫 1.首先我们在使用 @media 的时候需要 ...
- 移动WEB开发中媒体查询里的width, device-width, resolution
/*1.width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px. 当设置viewport width=device-width时,对应的媒体查询中width的值 ...
- 媒体查询的应用以及在css3中的变革
CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...
随机推荐
- JavaScript夯实基础系列(二):闭包
在JavaScript中函数是一等公民.所谓一等公民是指函数跟其他对象一样,很普通,可以进行把函数存在数组中.作为参数传递.赋值给变量等操作.当函数作为另一个函数的返回值在外部调用时,跟该函数在函 ...
- Linux运维企业架构实战系列
Linux运维企业架构项目实战系列 项目实战1-LNMP的搭建.nginx的ssl加密.权限控制的实现 项目实战2-LVS.nginx实现负载均衡系列 2.1 项目实战2.1-实现基于LVS负载均衡集 ...
- C#保留2位小数几种场景总结
场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25.可不可以刚好保留到最后一位不是 ...
- 从零开始学安全(四十)●上传文件MIME类型绕过漏洞防御
MIME检测原理 服务端MIME类型检测是通过检查http包的Content-Type字段中的值来判断上传文件是否合法的. php示例代码: if($_FILES['userfile']['type' ...
- PHP遍历文件夹下所有文件
不论是面试还是正常工作需要都会用到遍历文件夹下的所有文件,今天就记录一下笔记.废话不多说直接上代码: <?php /** * 遍历当前文件夹展示所有的文件和目录 */ function dirL ...
- Spring SpringMVC MyBatis配置笔记
工程大致结构: project |-src |----pojo |--------Temp.java |----dao |--------TempDao.java |--------TempDao.x ...
- flex练习---纵横中文网
采用 flexbox 弹性容器进行布局,只做练习用. 浏览器打开时切换到手机模式. 样本地址: http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E ...
- shell 查找与替换
grep sed 如果想把一个字符串中的一些字符删除可以如此:#Echo “2006-11-21 22:16:30” | sed ‘s/-//g’ | sed ‘s/ //g’ | sed ‘s/:/ ...
- solr8.0 ik中文分词器的简单配置(二)
下载ik分词器,由于是solr8.0,一些ik分词器版本可能不兼容,以下是个人亲测可行的版本 ik分词器下载 然后将解压出来的两个jar包放到以下路径: 其它的三个文件放到以下路径: 如果没有clas ...
- Win7下emacs简单配置
;;win7下.emacs在C:\Users\用户名\AppData\Roaming目录下 在.emacs文件中添加 ;; cancel welcome page取消欢迎界面(setq inhibit ...