min-aspect-ratio和max-aspect-ratio宽高比自适应布局
首先,移动端的适配,还是要先做好的,不管你是使用rem
布局,还是使用media
进行适配布局(只是单纯的宽度上),布局好了,这里只是宽度自适应了,如果是流式布局的话,这样就已经足够了,对于我们这里的单屏布局,就略显不足了。
所以这里就要用的:device-aspect-ratio
和aspect-ratio
了。
一个一个的来说吧。
device-aspect-ratio
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
前缀是device
,也能证明,这个属性是按照设备的尺寸来的,为什么单独说这个呢,因为不管是浏览器还是APP
,所有的承载H5页面的容器,都有自己的header
头以及最上面的手机时间功能显示的区域,一般这些内容,会占去120px
(双倍屏上,这个数据可能不准,只是想说,会被这些占用设备可视区域的可用高度,如果你是在浏览器全屏的话,就当我没说这些啦)的高度。
所以,对于前端的开发者来开发单屏的页面的话,这个属性其实是不怎么会用到的。
同时,device-aspect-ratio
还有两位两个兄弟属性,max-device-aspect-ratio
和min-device-aspect-ratio
,他们的兼容性在移动端,是可以不用去考虑的,绝大部分的移动端设备,都是支持的,在我看来,是可以直接放心使用的。
aspect-ratio
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
可视区域,这个对于我们来说,才是真正需要的。
直接就是上代码吧:
@media screen and (min-aspect-ratio: 9/16) {// 如果宽高比小于9:16的话,显示这个内容}@media screen and (max-aspect-ratio: 9/16) {// 如果宽高比大于9:16的话,显示这个内容}@media screen and (aspect-ratio: 9/16) {// 如果宽高比是9:16的话,显示这个内容
}
aspect-ratio
的取值:width/height
,即宽度与高度的对比
一般情况下,在PC
端的是:width > height
,在移动端的时候,width < height
,所以,其实如何在移动端判断是否为横屏,也可以按照这个方式来判断。 如果直接设置:aspect-ratio:9/16
,那么就表示,只要在width/height = 9/16
的情况下,才会被触发,但是同一个手机,在APP和浏览器(甚至不同的浏览器),这个宽高比是不同的,如果单纯的设置一个固定的值,还是很难稳定的实现某些功能的,所以也就提供了:max-aspect-ratio
和min-aspect-ratio
。 max-aspect-ratio : 9/16
表示如果当前页面的width/height <= 9/16
的话会被执行,max
表现大于的时候,与max-width
(表示最大的限制值)理论上是一样的概念,宽高比不大于这个值的时候。 同样的道理,min-aspect-ratio : 9/16
表示,当宽高比大于等于这个值的时候,就会被执行。
这里有一点要注意,只要设置了max-aspect-ratio或者min-aspect-ratio,那么aspect-ratio就无效了,因为max-aspect-ratio或者min-aspect-ratio真实的表现是“小于等于”和“大于等于”。
所以,如果你只是要监听一个比例的变化,而且,你需要使用到:max-aspect-ratio
,min-aspect-ratio
,aspect-ratio
这三个属性的话,那么就要按照本小节的示例代码,把aspect-ratio
写在最后面。
同样的,如果我们想要使用min-aspect-ratio
来设置不同的尺寸的,那么也要注意一点,要把大比例的写在后面,就比如:1/1
,3/4
,9/16
这三个比例的话,代码的实现部分就要:
@media screen and (min-aspect-ratio: 9/16) {// 只要宽高比大于等于9/16,就会执行
}@media screen and (min-aspect-ratio: 3/4) {// 只要宽高比大于等于3/4,就会执行
}@media screen and (min-aspect-ratio: 1/1) {// 只要宽高比大于等于1/1,就会执行
}
既然min-aspect-ratio
的区域是大于等于,当前的设备比例已经固定(假设为cur),我需要设置三个比例A(3) > B(2) > C(1)。再加上CSS的层叠覆盖理论,后面定义的会覆盖前面的。
那么就会出现:如果cur > C,那么cur > B ,cur > A ,这个时候,如果C的CSS放在了最后面,那么无聊如何也不会执行到A和B了。
所以,要把大值(涵盖区域广的)放到最底部,这个也可也称之为小区域理论。
3 – 正无穷 2 – 正无穷 1 – 正无穷
虽然在数学上来说,这个差距微乎其微,但是真实的情况确实是,CSS文件中,定义的顺序为: C ,B,A,也就是我们前面的一段代码的定义顺序。(这个如果真的理解不了,其实也可以不理解,写好了,试一下就OK了啊~)(再加一个理解方法,取属性的前缀min,越小的越先定义)
但同时也有一点注意,如果需要使用多次min-aspect-ratio
的话,那就不要再使用max-aspect-ratio
了,肯定会冲突的。
同理,max-aspect-ratio的情况也是相同的,只是定义的顺序与min-aspect-ratio相反,max-aspect-ratio的定义顺序是,max前缀,越大的值越先定义,所以如果上述的一段代码使用max-aspect-ratio来实现的话就是:
@media screen and (max-aspect-ratio: 1/1) {// 只要宽高比小于等于1/1,就会执行
}@media screen and (max-aspect-ratio: 3/4) {// 只要宽高比小于等于3/4,就会执行
}@media screen and (max-aspect-ratio: 9/16) {// 只要宽高比小于等于9/16,就会执行
}
min-aspect-ratio和max-aspect-ratio宽高比自适应布局相关推荐
- 单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
- html图片固定高宽比显示,科技常识:CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法 的相关资料,希望小伙伴们看 ...
- 关于div容器高度随着浏览器宽度按照宽高比自适应的问题(css解决方案)
div容器html代码: <div class="swiper"></div> div容器样式代码(此处的31.25%为div容器内容的宽高比,比如div内 ...
- css宽高自适应布局,实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
- 移动端宽高自适应布局解决办法
移动端布局总会出现宽高在不同移动终端显示不一致的问题,具体是由于各终端设备的宽高不一致引起的.通常情况下我们会通过用js来根据不同宽度实现自适应,那么高度如何自适应呢? 以上分别是做了宽度自适应的在 ...
- 微信小程序图片高度按照图片真实宽高比自适应
原理:image组件bindload属性 前端在按照设计图定的宽度做好图片的宽高之后,如果图片的原始宽高比对应不上,那么图片就会出现拉伸变形的情况,虽然微信小程序有mode属性可以对图片进行适应,但是 ...
- boost::mpl::min和boost::mpl::max相关的测试程序
boost::mpl::min和boost::mpl::max相关的测试程序 实现功能 C++实现代码 实现功能 boost::mpl::min和boost::mpl::max相关的测试程序 C++实 ...
- r语言min-max归一化_如何在R中使用min()和max()
r语言min-max归一化 Finding min and max values is pretty much simple with the functions min() and max() in ...
最新文章
- OpenCV 4.5.2 发布
- thymeleaf 的 th:each简单应用
- web页,如何按回车获得焦点,触发web控件事件..?
- 自动化运维之CentOS7下PXE+Kickstart+DHCP+TFTP+HTTP无人值守安装系统
- ML之LoRBaggingRF:依次利用LoR、Bagging、RF算法对泰坦尼克号数据集 (Kaggle经典案例)获救人员进行二分类预测——优化baseline模型
- Excel 转为 MySQL 语句
- C - And and Pair
- 响应式系统的基本原理
- python3获取用户输入_python3.4控制用户输入与输出
- eclipse如何添加Memory Analyzer
- 一文读懂一台计算机是如何把数据传送给另外一台计算机的
- 共模干扰和差模干扰,看完终于明白了
- android设置传感器的采集方向,Android-传感器开发-方向判断
- 编程语言c 难学吗,为什么有人说C ++是最难学的编程语言
- 周六 第八章 iptable
- php获取指定日期的节假日信息
- Vuecli中添加elementui插件
- 信息安全文章搜索引擎技术原理
- taro标签_Taro自定义标签栏TabBar
- Java + OpenCV 实现图片修复(去水印)(JavaCV)