pc端自适应方案

pc自适应方案分析

一、常见处理方式

1. 定宽
   电商类、内容为主的网站几乎采用这种方式
   1.网易考拉、京东（1190px）
   2.知乎（1000px),果壳（1000px),网易新闻（1200px)

2. 媒体查询+定宽
   图片类、简单布局。在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏
   1.花瓣网

   1. @media screen and (min-width: 1529px)版心为1500px
   2. @media screen and (min-width: 1276px) and (max-width: 1528px)版心为1248px
      
   3. @media screen and (max-width:1275px)版心为996px

   2.天猫

   1. @media screen and (min-width:1260px)版心为1230px
      
   2. @media screen and (max-width: 1260px)版心为982px

二、常见pc屏幕

一般只需要适应 1920px、1440px、1366px主流分辨率

三、注意事项

1.如果是自适应尽量控制变化范围、尽量只是布局微调
2.不对过多地方做响应式减少设计和前端的工作
3.在设计前期，由前端和设计共同确定断点，一般设计两个端点就差不多了。

pc端自适应方案

原文：https://www.cnblogs.com/xiaotiejiang/p/10973917.html