Question

是否存在用于使网站响应大多数屏幕尺寸的特定CSS技术？大型移动设备，小型移动设备，平板电脑，台式机等。

是否有要使用的特定断点？是否有适合所有屏幕尺寸的特定方法？

Answer 1

我建议您在考虑响应能力时考虑“移动优先”。

这意味着默认情况下，您将显示在小屏幕上，然后从平板电脑开始设置断点。

这可以通过以下方式完成：

// default CSS here - for extra small screens. (mobiles).
p {
    font-size: 24px;
}

// for  small screen with minimum width of 768px (tablet)
@media only screen and (min-width: 768px) {
  //CSS for tablets here
    p {
        font-size: 19px
    }
}

// for medium screen with a minimum width of 992px width (laptops)
@media only screen and (min-width: 992px) {
  //CSS for for laptops / small screen desktops column
    p {
        font-size: 16px
    }
}

// for large screen with a minimum width of 1200px width (wide desktop)
@media only screen and (min-width: 1200px) {
  //CSS for large desktops screen
}

使用上述CSS，任何宽度小于768px的设备都将被视为可移动设备，无论其确切的屏幕宽度是什么。

Answer 2

如果尚未添加此视口标签<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后将css设置为在某个断点处将元素的宽度和高度设置为百分比

用于响应式Web设计的CSS技术

2 个答案: