使用媒体查询响应的网站答案

【问题标题】：website responsive using media-queries使用媒体查询响应的网站
【发布时间】：2020-01-16 18:37:53
【问题描述】：

我使用 bootstrap 构建了一个网站，它在每个移动视图中都能正常工作，但是在“320px”分辨率下，当我腐烂我的移动视图时，响应式视图无法正常工作，请提供一些解决方法的建议。

【问题讨论】：

【解决方案1】：

使用媒体查询并将最大宽度设置为 320 像素

@media (max-width: 320px){
 //write css code here
}

【讨论】：

【解决方案2】：

超小型设备（手机，600 像素及以下）

 @media only screen and (max-width: 600px) {...}

小型设备（纵向平板电脑和大型手机，600 像素及以上）

@media only screen and (min-width: 600px) {...}

中型设备（横向平板电脑，768 像素及以上）

@media only screen and (min-width: 768px) {...}

大型设备（笔记本电脑/台式机，992 像素及以上）

@media only screen and (min-width: 992px) {...}

超大型设备（大型笔记本电脑和台式机，1200 像素及以上）

@media only screen and (min-width: 1200px) {...}

【讨论】：