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

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，任何宽度小于768像素的设备都将被视为可移动设备，无论其确切的屏幕宽度如何。