css - 设备宽度和设备高度

标签 css responsive-design media-queries

需要帮助来了解我是否像这样预定义了设备宽度:

  • 超小型设备电话 (<768px)
  • 小型设备平板电脑(≥768 像素)
  • 中型设备桌面(≥992px)
  • 大型设备桌面(≥1200 像素)

那我怎么知道设备高度呢? 因为在一个页面站点上,它以一种方式显示为 768px x 900px,以另一种方式显示为 768px x 750px。

希望这是有道理的!

干杯,

桑德拉·P。

最佳答案

在响应式设计中,(实际上在一般的网页设计中)不真正推荐通过高度操纵或更改界面的内容或外观。

用户在浏览内容时通常会进行“向下滚动” Action 。这在手持设备和台式计算机中都是相同的。

通过宽度管理内容是一种更好的方法,您实际上不需要知道高度。


我可以给出一些高度引用,但请记住,因为它用得不多,所以不准确;

Extra small devices Phones (<640px)
Small devices Tablets (≥640px)
Medium devices Desktops (≥820px)
Large devices Desktops (≥900px)

另外,我强烈推荐 Google Chrome 开发者工具的响应式测试模块。除此之外,还有许多在线应用程序和工具包可用于测试您的设计在不同尺寸的设备和屏幕尺寸上的视觉效果。


请注意,使用最流行的设备屏幕尺寸可能也是一种不错的方法。

这里列出了流行的手持设备及其高度;

  • 苹果 iPhone 7 - 667px
  • Apple iPhone 6 Plus、6s Plus - 736px
  • 苹果 iPhone 6、6s - 667px
  • 苹果 iPhone 5 - 568px
  • LG G5 - 640 像素
  • LG G4 - 640 像素
  • 三星 Galaxy S7、S7 edge - 640 像素
  • 三星 Galaxy S6 - 640px
  • 三星 Galaxy S4 - 640px
  • 三星 Galaxy Nexus - 600px
  • 三星 Galaxy Note 3 - 640px
  • 微软 Lumia 1020 - 480 像素
  • 微软 Lumia 925 - 480px
  • 摩托罗拉 Nexus 6 - 690 像素
  • HTC One - 640px
  • 索尼 Xperia Z - 640px

检查此链接以了解所有设备及其屏幕尺寸; http://mydevice.io/devices/

关于css - 设备宽度和设备高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39786525/

相关文章:

php - CSS 侧边栏无缘无故掉落在页面上?

javascript - Ul 下拉菜单和阴影不对齐

html - 像电脑键盘一样在图像上对齐文本

html - 将响应式图像链接到 URL

css - 媒体查询无法正常工作(平板电脑大小有效,移动设备无效)

css - 仅在移动设备上显示内容

javascript - <li> 元素在不同背景颜色之间切换

html - 没有 Bootstrap 的响应式设计

twitter-bootstrap - Bootstrap 3 - 响应式 mp4 视频

css - 如果 @media all 在 css 中声明,那么 max-device-width 是必需的吗?