【设计杂谈】网页适配的细节小思考
做网页设计，这个细节你可能不知道
「工作背景」
近期接到一个设计操作类终端的PC网页版的项目，进行了一番调研后，当时按了网页版基础规范1200px的尺寸设计了可视区域。但当在验收项目时，发现页面无论放在什么分辨率的屏幕下，显示的宽度都是固定，而不是像调研的其他产品那样是全凭展示的。
于是就跑去请教了开发小哥哥，他一番讲解后，顿时才知道里面的小门道。
「自我实践感悟」
在目前各种分辨率下，网页的最小宽度（可视区域）是1200px，这个宽度能适配市面上大部分的机型。
在开发过程中，可以选择“定宽页面”或“全屏页面”，设计师一般只需提供1200可视区域的设计稿就可以，如果需要特殊全屏页面，可直接跟开发沟通要求做“全屏页面”。
这时，“全屏页面”要分两种情况：
两边无固定间距
两边有固定间距
两边无固定间距
这种情况，设计师只需提供1200设计稿就够了，跟开发沟通要求做成全屏页面，如果设计师无特殊要求页面中哪个部分不可变动，那么起初开发会根据自身的基础判断对全屏页面中变化的地方做自适应的变化（多数情况是，如果左侧有操作栏，左侧是不变的，变的是右侧，而右侧中不变的是模块的间距，这跟移动端自适应类似）。 如果设计师有特殊要求某部分不可变动，需在移交设计稿时提前跟开发沟通好。
这种两边无固定间距的设计，多数用于网页型的操作系统。这类系统有很多数据、元素等内容，要求能在页面上最大限度的展示尽量多的数据，目的是能让用户可以在一屏内看到更多更全的内容。
···比如growingio··
（全屏页面）
（伸缩到最小 1000～1200 约=1200）
（宽度小于1200后，页面内容不再变化，小于1000页面出现了滚动条）
两边有固定间距
这种情况下，设计师不仅提供1200的设计稿（1200已包含最小尺寸下的两侧最小间距），还需提供全屏页面的设计稿（包含全屏两边固定的间距），也要跟开发沟通要求是要做成“全屏页面”，这样开发就会根据两份设计稿做好“全屏页面”的自适应变化。
这种两边有固定间距的设计，多数用于视频类的网站，此类网站图文展示内容多，操作切换单一，两侧留间距更多是为了让页面更多空气感，不会因为内容紧凑而有压迫感。
···比如腾讯视频和bilibili··
（全屏页面）
（伸缩到最小 1000～1200 约=1200）
（宽度小于1200后，页面内容不再变化，小于1000页面出现了滚动条）
（bilibli全屏）
（大于1200小于全屏）
（大于1000小于1200）
（小于1000，页面出现滚动条）
「小结」
总的来说，在PC网页搭建中，这3个十分基础且需要预先说明的：
1. 网页采用定宽页面（常用于：详情，图片，字段不多的列表，内容流等）
2. 网页采用全屏页面（常用于：操作类页面，比如数据分析平台，需要全屏查看的看板页，采用左侧导航的管理类网站，网站宣传页，字段很多的列表页，使用瀑布流的页面，或者页面中需要可视区域更大才方便操作的页面，比如地图轨迹等）
3. 页面内容超出页面高度时，是采用页面滚动条，还是模块内滚动？（页面滚动适合于：内容流的页面。模块内滚动适用于：需要固定在顶部或底部的页面）
