web常见的三种屏幕布局方案

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

经常听到有人拿到设计稿时(特别是做移动端的人拿到pc端时)不知道该用什么方法做布局，所以我做了3套动效展示给大家来解释常用的布局方案是啥。

固定宽度

按照设计稿的宽度固定住网站主体(比如我960px或1200px）
当浏览器窗口变大时：左右超出的宽度用背景色填充，上下则吸附边缘
当浏览器窗口变小时：则出现滚动条滚动浏览

• 优点：开发方便、视觉效果和设计稿保持一致
• 缺点：浏览器窗口变小时需要通过滚动条来浏览
• 移动端适配：常用的是检测移动端设备切换到移动端的站点

image

全屏拉伸

按照设计稿的各项参数，转换为rem单位来开发，保证浏览器窗口变换时都按照同比例缩放（极限情况下除外）

• 优点：开发方便，在和设计稿尺寸相近的窗口尺寸范围内能同视觉稿保持几乎一致的比例，还可以勉强作为兼容移动端的站点（字会很小）
• 缺点：当屏幕很小的时候由于全部按同比例缩小了，所以看不太清

image

左右吸附

利用flex左右两端元素吸附两侧，宽度利用flex进行自适应(也可以不用)，上下距离及高度保持不变

• 优点：比较好的兼容移动端
• 缺点：开发复杂，需要考虑每个区域元素的适配方案

image

定制化适配

集合rem、flex、min-width、max-width、min-height、max-height等定制化做适配方案，需要同设计师进行细致的方案制定

• 优点：pc移动可以完美的切换
• 缺点：开发复杂

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力