移动设备的响应式样式

Question

我正在使用Joomla 3.4和Bootstrap为我的兄弟设计一个网站。这是我第一次建立一个响应式网站，并希望得到一些建议，以确保我在CSS中的内容，即特定单位的字体大小。

我知道我需要使用媒体查询来定位每个视口，但有一件让我感到困惑的事情就是尝试锻炼哪种尺寸适合智能手机，不确定是否有一个指南列表可以帮助我进行。

如果有人可以提出建议，我会非常感激。

Answer 1

由于您正在使用Bootstrap，因此您应该使用其网格系统

  

/ *超小型设备（手机，小于768像素） / / 无媒体查询   因为这是Bootstrap * /

中的默认值      

/ *小型设备（平板电脑，768px及以上）* / @media（最小宽度：   @ screen-sm-min）{...}

     

/ *中型设备（台式机，992px及以上）* / @media（最小宽度：   @ screen-md-min）{...}

     

/ *大型设备（大型台式机，1200px及以上）* / @media（最小宽度：   @ screen-lg-min）{...}

以下是您可以查看的link。