CSS不同手机型号各种尺寸设备宽高比

简介: CSS不同手机型号各种尺寸设备宽高比

aspect-ratio CSS 属性为 box 容器规定了一个期待的纵横比


这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。


内容框首选的宽高比是通过 width / height 定义的。


如16 / 9横屏视频比例


不同手机型号各种尺寸设备缩小放大均为16:9宽高比

ca1d552fa8990dc305bd0591b0468460_b2487e9177654dd2801f65572c255faa.png

f08b8f7bbeff7eb090022eb4ca45e112_fb3744ed94f849569d6d088ad3baa176.pngad6cbaab81a4285c5cb9f93110b10f1d_37633f085fea4781adfac5cbbe842530.png


相关文章
|
5天前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
6 2
|
5天前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
9 1
|
5天前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
7 1
|
5天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
8 0
|
11天前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
|
2月前
|
存储 Android开发
采用SAMKeychain钥匙串存储设备唯一标示与何种情况下同一个手机它存储的值会变化
采用SAMKeychain钥匙串存储设备唯一标示与何种情况下同一个手机它存储的值会变化
29 1
|
2月前
|
编解码 测试技术 API
模拟手机设备:使用 Playwright 实现移动端自动化测试
本文介绍了使用Python的Playwright库进行移动设备模拟和自动化测试的方法。通过Playwright,开发者能模拟不同设备的硬件和软件特性,如屏幕尺寸、用户代理,以确保网站在移动设备上的表现。示例代码展示了如何模拟iPhone X并访问网站,之后可在此基础上编写测试代码以检验响应式布局和交互功能。Playwright的设备参数注册表支持多种设备,简化了移动端自动化测试的流程。
83 1
|
2月前
|
负载均衡 监控 前端开发
|
2月前
|
编解码 前端开发 开发者
【Web 前端】CSS常用尺寸单位有哪些?应用场景?
【4月更文挑战第22天】【Web 前端】CSS常用尺寸单位有哪些?应用场景?
|
2月前
|
编解码 移动开发 安全
如何让你的APP变小及手机各屏幕尺寸
如何让你的APP变小及手机各屏幕尺寸
55 0