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

Posted 2023-03-05

【中文标题】响应式设计，何时从“桌面”设计跳转到“平板”等？

【英文标题】：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

【参考方案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 */