响应式设计，何时从“桌面”设计跳转到“平板”等？

【问题标题】：Responsive design, when jump from "desktop" design to "tablet" and so on?响应式设计，何时从“桌面”设计跳转到“平板”等？
【发布时间】：2021-12-01 03:30:49
【问题描述】：

我有 3 种设计变体，用于台式机 (1440)、平板电脑 (768) 和移动 (320)，并且必须根据它们中的每一个进行响应式布局。我必须在哪些断点从台式机跳转到平板电脑，从平板电脑跳转到移动设备？

【问题讨论】：

使用1366px, 1360px, 1280px, 1024px, 800px, 768px, 667px, 414px, 411px, 375px, 360px, 320px

标签： html css layout responsive-design

【解决方案1】：

Check the below media queries for Desktop, Tablets and Laptops
@media (min-width:320px)  
{ /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  
{ /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  
{ /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  
{ /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) 
{ /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) 
{ /* hi-res laptops and desktops */ }

【讨论】：