AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2023-08-01 355
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS不同手机型号各种尺寸设备宽高比

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


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


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


如16 / 9横屏视频比例


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

ca1d552fa8990dc305bd0591b0468460_b2487e9177654dd2801f65572c255faa.png

f08b8f7bbeff7eb090022eb4ca45e112_fb3744ed94f849569d6d088ad3baa176.pngad6cbaab81a4285c5cb9f93110b10f1d_37633f085fea4781adfac5cbbe842530.png

文章标签：
前端开发
容器
关键词：
手机设备
CSS尺寸
手机尺寸
CSS宽高比
CSS宽高
仙鹤童子```
目录
相关文章
蚝油菜花
|
人工智能 算法 前端开发
OmAgent：轻松构建在终端设备上运行的 AI 应用，赋能手机、穿戴设备、摄像头等多种设备
OmAgent 是 Om AI 与浙江大学联合开源的多模态语言代理框架，支持多设备连接、高效模型集成，助力开发者快速构建复杂的多模态代理应用。
蚝油菜花
1449 72
OmAgent：轻松构建在终端设备上运行的 AI 应用，赋能手机、穿戴设备、摄像头等多种设备
蚝油菜花
|
存储 机器学习/深度学习 人工智能
TaoAvatar：手机拍出电影级虚拟人！阿里3D高斯黑科技让动捕设备下岗
阿里巴巴最新推出的TaoAvatar技术，通过3D高斯溅射实现照片级虚拟人实时渲染，支持多信号驱动与90FPS流畅运行，将彻底改变电商直播与远程会议体验。
蚝油菜花
939 8
TaoAvatar：手机拍出电影级虚拟人！阿里3D高斯黑科技让动捕设备下岗
1490240482
|
存储 Android开发 网络架构
点心云-N1盒子、机顶盒、手机等设备-小白保姆式刷机教程
本文介绍了N1盒子的刷机教程，包括未刷机和已刷其他系统的N1。教程详细列出了所需工具和具体步骤，如下载工具包、制作安装盘、打开ADB模式、降级、刷入新系统等，确保用户能够顺利完成刷机操作。对于已刷第三方系统的N1，还提供了解决USB线不被识别、驱动问题及供电不足等常见问题的方法。
1490240482
4678 1
点心云-N1盒子、机顶盒、手机等设备-小白保姆式刷机教程
你挚爱的强哥
|
Web App开发 Linux Android开发
Chrome谷歌浏览器的WeChat微信模拟器，既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器，既可以设置模拟很多型号的手机设备Mozilla
你挚爱的强哥
2251 0
大树营养快线
|
前端开发 开发者 UED
设备像素、css像素、设备独立像素、dpr、ppi之间的区别
【10月更文挑战第24天】在实际应用中，这些概念相互关联，共同影响着网页在不同设备上的显示表现。开发者需要了解它们之间的区别和关系，以便更好地进行网页设计和优化，确保在各种设备上都能提供良好的用户体验。
大树营养快线
768 3
bibilili
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
Playwright 是一个强大的工具，用于在各种浏览器上测试应用，并模拟真实设备如手机和平板。通过配置 `playwright.devices`，可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外，Playwright 还支持模拟地理位置、区域设置、时区、权限（如通知）和配色方案，使测试更加全面和真实。例如，可以在配置文件中设置全局的区域设置和时区，然后在特定测试中进行覆盖。同时，还可以动态更改地理位置和媒体类型，以适应不同的测试需求。
bibilili
1444 1
土木林森
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力：从基础到实战，打造灵动响应式网页！
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位，包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素；百分比和em/rem利于构建响应式布局；视窗单位适合全屏设计；fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
土木林森
455 4
朝阳39
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
朝阳39
280 2
朝阳39
|
前端开发
css 拉伸 resize —— 实现可拉伸的div（含限制拉伸的尺寸）
css 拉伸 resize —— 实现可拉伸的div（含限制拉伸的尺寸）
朝阳39
1002 1
朝阳39
|
前端开发
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
朝阳39
357 1

热门文章

最新文章

  • 1
    阿里云——Java实现手机短信验证码功能
  • 2
    超燃，拿来即用！Echarts动态排名柱状图(自适应电脑和手机端)说明文档
  • 3
    原创自研uniapp+vue3手机桌面os管理系统
  • 4
    选择手机开发平台的十大重大因素
  • 5
    如何让你的小游戏适配不同尺寸的手机屏幕
  • 6
    【问题&解决】解决eclipse不识别Android手机的问题
  • 7
    华为要“开车”？ 华为HiCar智慧服务再次亮相Mate30手机发布会现场
  • 8
    Python爬虫：爬取手机App数据，记得安装配置Charles
  • 9
    无奇不有，20款国外便携式智能手机充电器
  • 10
    与众不同 windows phone (28) - Feature（特性）之手机方向, 本地化, 应用程序的试用体验, 系统主题资源, 本地数据的加密解密
  • 1
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
    527
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    410
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    403
  • 4
    （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
    262
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    517
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
    693
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
    1255
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
    284
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    1049
  • 10
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
    482

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • Tangram
  • 360手机卫士 插件化漫谈
  • 手机京东Crash自动分析处理系统
    • 下一篇
    利用阿里云OSS（对象存储服务）快速搭建私人网盘