设备宽度和设备高度

时间:2016-09-30 08:01:04

标签: css responsive-design media-queries

需要帮助才能了解我是否预先设置了这样的设备宽度:

  • 超小型设备电话(< 768px)
  • 小型设备平板电脑(≥768px)
  • 中型设备台式机(≥992px)
  • 大型设备台式机(≥1200px)

然后我怎么知道设备高度? 因为在一个页面网站上,它在768px x 900px上以一种方式显示,在另一种情况下在768px x 750px上显示。

希望它有意义!

干杯,

Sandra P。

2 个答案:

答案 0 :(得分:1)

在响应式设计中,(实际上在网页设计中)通常不建议按高度操作或更改界面的内容或外观。

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

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

我可以提供一些高度参考列表,但请记住,因为它没有真正使用太多,它不准确;

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

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

注意,使用最流行的设备屏幕尺寸也可能是一个很好的方法。

以下列出了流行的手持设备及其高度;

  • Apple iPhone 7 - 667px
  • Apple iPhone 6 Plus,6s Plus - 736px
  • Apple iPhone 6,6s - 667px
  • Apple iPhone 5 - 568px
  • LG G5 - 640px
  • LG G4 - 640px
  • 三星Galaxy S7,S7 edge - 640px
  • 三星Galaxy S6 - 640px
  • 三星Galaxy S4 - 640px
  • 三星Galaxy Nexus - 600px
  • 三星Galaxy Note 3 - 640px
  • Microsoft Lumia 1020 - 480px
  • Microsoft Lumia 925 - 480px
  • 摩托罗拉Nexus 6 - 690px
  • HTC One - 640px
  • Sony Xperia Z - 640px

检查此链接是否包含所有设备及其屏幕尺寸; http://mydevice.io/devices/

答案 1 :(得分:0)

高度无关紧要。设置高度:自动到html正文内容,根据宽度我们可以对齐html正文内容中的组件。

测试响应式网站: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en