时间戳

首页 > 解决方案 > 适用于所有不同设备的响应式网页设计

html - 适用于所有不同设备的响应式网页设计

问题描述

我有大约 5 年的网络开发经验。但有时我有这个问题，我无法自己回答。现在有很多设备在横向和纵向等方面具有不同的屏幕解决方案。

我仍然使用 Bootstrap 断点（1200px、1024px、768px，对于移动设备，我使用 480px 最大宽度）但最近我的网站出现了一些问题，因为客户使用的是华为或某些智能手机，而不是由于 iphone 很受欢迎，而且该网站没有针对这款特定的智能手机进行优化。

那么我怎样才能避免这样的事情呢？你有什么好的建议给我吗？

标签： htmlcsstwitter-bootstrapresponsive-designfrontend

解决方案

对于真正的响应式设计，避免使用断点来影响样式。已经有太多的可能性，而且还有更多的可能性，任何人都无法做到这一点。

关于@media size 查询我发现的唯一用途是：

测试纵横比以确定它是处于横向还是纵向模式。

@media (max-aspect-ratio 1/1) { ...

测试物理尺寸以在小屏幕上将按钮移得更远。

@media  screen and (max-width: 6in) {
    a { line-height: 200%; }  /* fat-finger clickables */
    input[type=radio] { margin: .5em; }
}

当然，在所有 CSS 中，请记住不要使用绝对单位，而始终使用相对单位（%、em、vh、vw）。

推荐阅读