# 开发项目中布局(干货)
# 1.pc
推荐:百分比布局vw,vh
# vw(view width的简写，是指可视窗口的宽度)
整体思想,设计稿看成是100等分.比如设计稿是1200*900,1vw=(1200/100)px=12px 1vh=(900/100)px=9px
# 怎么换算
浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
推荐自动换算工具,以**vscode**为例,**px-to-vw**,快捷键(Alt + Z)转换为vh
2
# vh(view height的简写，是指可视窗口的高度)
# 怎么换算:
浏览器高度900px, 1 vh = 900px/100 = 9 px。
推荐自动换算工具,已**vscode**为例,**px-to-vw**,快捷键(Alt + Z)转换为vh
2
# 2.移动端
h5采取lib-flexible (opens new window) 推荐:rem(rem是相对于根元素html)
# 怎么换算:
第一步,拿到设计稿,以**蓝湖**为例,可能设计不是按照750*1624(iPhone6设计稿)大小设计的,,蓝湖可以自定义宽度和高度,设置宽度为750
第二步,px转换为rem.转换后的设计稿/75,就是rem值.
字体的大小用 mixin，如设计稿12px,设计稿/2.转换后.font-size(6px)
推荐自动换算工具,已**vscode**为例,**px to rem**,需要配置Px-to-rem(Px-per-rem
Number of pixels per 1rem.)为75),快捷键(Alt + S)转换为rem
2
3
4
5
# 3.小程序
推荐:rpx(responsive pixel)可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx
# 怎么换算:
第一步,拿到设计稿,以**蓝湖**为例,可能设计不是按照750*1624(iPhone6设计稿)大小设计的,,蓝湖可以自定义宽度和高度,设置宽度为750
第二步,如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
推荐自动换算工具,已**vscode**为例,**Alt+Shift+P**,需要配置Px-to-rpx( Base Width
基准设计稿宽度 (单位: px), 默认值: 1242).所以也可以不用将设计稿转换为750.直接设置设计稿宽度就行
2
3
4
# 相关单位认识
# 1.px
px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小
# 2.em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
# 3.rem
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
# 4.%
一般来说就是相对于父元素的
# 5.vw,vh
css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
# 6.vm
css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
# 相关资料
px、em、rem、%、vw、vh、vm这些单位的区别 (opens new window)