媒体查询和屏幕方向
Media queries and screen orientation
我正在创建响应式设计网页，我想确保针对不同的设备和方向正确执行所有媒体查询。
post 建议尝试使用最小宽度和最小高度媒体查询。并针对不同的分辨率设置不同的断点。
screen orientation for multiple tablets with fluid design
虽然，我发现这个方法有方向（见下文）。
我应该使用这种方法还是上面的方法？
我应该使用@media screen，还是应该考虑all vs screen？
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
屏幕方向很有趣，因为它并不总是由 device/browser 报告的内容，因此使用起来不如 min-width/max-width。
另一件事是，除非你想在设备横向时做一些特别时髦的事情，否则只需根据宽度断点调整你的设计通常就足以获得你想要的效果。
如果您有横向设备，那么让设计像纵向显示一样水平显示可能没问题 space。也就是说，这不会是用户的意外行为。
至于媒体 all 与 screen，我通常只是坚持使用屏幕，因为如果用户想要执行打印页面之类的操作，我不一定要我的断点干涉那个。
尽管如此，您应该为您的用户考虑最常见的用例，并据此做出决定。如果它只是一个普通的网络 app/page，那么只使用 screen 就完全没有问题，不用担心 orientation.
我正在创建响应式设计网页，我想确保针对不同的设备和方向正确执行所有媒体查询。
post 建议尝试使用最小宽度和最小高度媒体查询。并针对不同的分辨率设置不同的断点。
screen orientation for multiple tablets with fluid design
虽然，我发现这个方法有方向（见下文）。 我应该使用这种方法还是上面的方法？ 我应该使用@media screen，还是应该考虑all vs screen？
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
屏幕方向很有趣，因为它并不总是由 device/browser 报告的内容，因此使用起来不如 min-width/max-width。
另一件事是，除非你想在设备横向时做一些特别时髦的事情，否则只需根据宽度断点调整你的设计通常就足以获得你想要的效果。
如果您有横向设备，那么让设计像纵向显示一样水平显示可能没问题 space。也就是说，这不会是用户的意外行为。
至于媒体 all 与 screen，我通常只是坚持使用屏幕，因为如果用户想要执行打印页面之类的操作，我不一定要我的断点干涉那个。
尽管如此，您应该为您的用户考虑最常见的用例，并据此做出决定。如果它只是一个普通的网络 app/page，那么只使用 screen 就完全没有问题，不用担心 orientation.