前端布局之道 | Never too old to learn

# 前端布局之道

# 设计稿标准

1.pc端

当前最流行的分辨率是1920*1080的，在该分辨率下，页面中心区域为1200px以内都可以。
建议1000-1200（1200比较规范）。一般采用全屏展示和两侧留白的方式。
原因：两侧留白是为了适配不同电脑屏幕的尺寸，能够确保网站只是电脑站的时候一些笔
记本电脑也能显示全面网站的内容区域
淘宝京东内容区域都是1200

质料 (opens new window)

2.移动端

设计稿一般是以iphone6为基准，设计稿750*1206

# 适配方案

先简单介绍下px,em,rem,vw（重点）

1.px像素，屏幕物理像素点，现在一般桌面分辨率和物理分辨率几乎一致的。
2.em是相对长度单位。相对于当前对象的文本的字体尺寸（如果没有设置文本尺寸，那就是相对于浏览器默认的字体尺寸，也就是16px）。1em=16px.我们建议将body.font-size设成62.5%. 16px * 62.5% = 10px,这样1em = 10px.
3.rem相对单位，但是是相对于html根原始的。rem不会受到对象内文本字体尺寸影响，而且只需要改变根原始就能改变所有的字体大小。兼容性不错的。
4.重点来了vw和vh，视口单位（viewport units），根据浏览器的窗口大小的单位，不受显示器分辨率影响谁不是很nb.1vw=可视窗口的百分之一

1.移动端 1.淘宝弹性布局方案lib-flexible (opens new window) phone6，设置html的font-size为 75px。所以1rem = 75 px 所以我们只需要按照设计稿（设计尺寸/75）来布局。

vscode,推荐工具px-to-vw 2.vw布局

2.pc端(内容为主的社区网站或者电商网站使用自适应布局的并不多) 1.使用vw+rem来实现响应式布局 2.Bootstrap 响应式设计 (opens new window)

# 技巧

1、响应响应垂直居中

#box { 
  width: 50vw; 
  height: 50vh; 
  margin: 25vh auto; 
}

1
2
3
4
5

2.模仿bootstrap的栅栏布局

.col-2 { 
  float: left; 
  width: 50vw; 
} 
.col-4 { 
  float: left; 
  width: 25vw; 
} 
.col-5 { 
  float: left; 
  width: 20vw; 
} 
.col-8 { 
  float: left; 
  width: 12.5vw; 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

全量分析 阅读量：

# 前端布局之道

# 设计稿标准

# 适配方案

# 技巧

评 论：

评论：