设计稿和前端 csshtml5

内容不断更新中，可能存在知识点错误，欢迎指正
先来看一些概念：
文章图片

CSS相对长度单位：

px,像素

em,元素的字体高度

%,百分比

rem,根元素的font-size

vm,视窗宽度，1vw=视窗宽度的1%

vh,视窗高度，1vh=视窗高度的1%

CSS像素px:
CSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！

为了保证阅读体验一致，CSS可以自动在不同设备之间可以调节。即一份代码可以在不同的大小的设备之间显示，并且可以保证阅读体验一致。

默认情况下一个CSS像素应该是等于一个物理像素的宽度。

但是在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。

在浏览器上通过ctrl +/-可以扩大缩小屏幕，其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大，分辨率降低。

iPhone6,7,8都是两倍屏手机，即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机，一个CSS像素等于3物理像素。

如果我们要以px写，iPhone6为例，设计稿给出一个图片宽高为40px??40px。在实际开发中要除以2，宽高要写成20px??20px。因为iPhone6是两倍屏手机。

早些年开发和UI设计上沟通的问题主要是因为那时都是px的解决方案，需要把尺寸除以2。

实际开发中设计师可能会给我们两种稿，一种是375的iphone6一倍稿，一种是750的web两倍稿。

1、首先我为什么没有打单位，原因是这里面像素的概念非常多，其实有些连培训出来的UI都搞不清楚，因为前端如何做的适配他们并不会知道，他们只需要关注尺寸和倍数。
2、首先科普几个概念，像素中比较重要的， 逻辑像素pt， 物理像素px(pt和px的关系就是1pt里面有几个物理像素点) 和viewport像素(浏览器内部对逻辑像素进行再处理的结果，即css中的px，默认css的1px即1物理像素，但会随着设备变化而变化)。逻辑像素和物理像素的比值就是 dpr倍，就是常说的几倍图。
3、蓝湖上传设计稿时，假设设计师在750的稿上做的设计，他上传的时候会选择 ios@2x来进行上传。这时开发打开蓝湖看到的ios尺寸是375pt逻辑像素，依旧是1倍图的样子。我们打开像素选择，会变成750px，这时蓝湖中表示的px其实就是物理像素。
4、但如果设计师上传的375的设计稿，他上传的时候会选择 ios@1x来进行上传，这时开发打开蓝湖看到的尺寸还是1倍图的样子。我们打开像素选择，是375px，这时的px依旧是物理像素的概念，但如果要使用必须像素??2，蓝湖会帮我们转化，设置一下。（因为iphone6设备他的逻辑像素就是375??667，但是他的物理像素就是750??1334）
5、 web开发时，前端开发时如何做不同尺寸手机间的一个等比例缩放呢，本人未接触过IOS开发，当前只考虑web项目和小程序项目，采用对应的rem和rpx，且 viewport width=device-width。( viewport width=device-width是什么意思，其实就是让设备的物理宽度等于页面宽度)
6、后面会介绍全局Css vw/vh方式。

一、WEB端，rem和flex配合方案其实我们会纳闷，比如拿到设计师的两倍图，假如把所有对应的px尺寸/2应用到750px/2宽的移动端页面的css中，结果会如何？其实也是会实现缩放适应的，因为css中的px也是一个相对长度单位，是根据物理像素/逻辑像素的值变化而变化的一个值。（后面我们可以试验一下）
但是我们今天介绍的是用rem来配合flex实现。

rem布局很是简单，其基本原理就是根据屏幕不一样的分辨率,动态修改根字体的大小,让全部的用rem单位的元素跟着屏幕尺寸一块儿缩放,从而达到自适应的效果。

设计稿是按照iphone6来设计的（iphone6实际宽度 375px），而设计稿上的宽度是750px，早些年是直接把全部尺寸/2，如今我会这样用rem实现自适应：

html { font-size: calc(100vw / 7.5); //除以的7.5是根据设计稿的屏幕宽度来定的，这样750px宽度下根元素字体大小则为750px/7.5=100px=1rem }

其中，100vw是设备宽度deviceWidth，这样就实现了不一样设备宽度下，动态修改根字体font-size的大小，好比：

deviceWidth = 320，font-size = 320 / 7.5 = 42.6667px //iphone5 deviceWidth = 375，font-size = 375 / 7.5 = 50px //iphone678 X deviceWidth = 414，font-size = 414 / 6.4 = 55.2px //iphone678 plus

因此设计思路就是，根据设计稿将html的font-size设置为100px。好比750物理像素的设计稿，就除以7.5。
将设计稿的尺寸除以100便可，换算很方便。
优化：像上面这样设计的话，会无限制放大，在大屏上很很差看。解决方法就是给根元素字体大小限制最大最小值，以及body也增长最大最小宽度限制，这样就能够改善用户体验了。

html { //设置根字体大小单位为vw，页面元素的尺寸单位都设为rem，搭配vw和rem，可实现布局根据视口变化而变化 font-size: calc(100vw / 7.5); // 同时，经过Media Queries 限制根元素字体最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }// body 也增长最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大太小 body { max-width: 540px; min-width: 320px; }#app { font-size: initial; //重置页面字体大小恢复为浏览器默认16px，不然就显示成50px了 }

有时我们拿到的是375iphone6的一倍图，该怎么去设置呢？ 只要将设计稿的尺寸除以50便可。
但我们有时候还会拿到640的图，那时候该怎么去换算呢，利用一下scss的变量吧

// rem 单位换算：定为 75px 只是方便运算，750-75px、640-64px、1080-108px，如此类推 $vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值（这个值是变动的） @function rem($px) { @return ($px / $vw_fontsize ) * 1rem; }// 根元素大小使用 vw 单位 $vw_design: 750; //这个变量值是不变的 html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时，通过Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 body { max-width: 540px; min-width: 320px; }

二、小程序中的rpx

文章图片

从小程序的概念中可以知道，rpx是尽量还原了在750物理像素下，1rpx=1物理像素的比例。当我们切换移动设备的时候，移动设备的物理像素会变化，小程序内部也会有个算法计算当前rpx的值在屏幕中实际物理像素的一个比值。比如在iphone5中1rpx = 0.42px = 0.84物理像素。
小程序中rpx与px的转换例如：设计稿750px宽度
那么恭喜您，你设计稿上宽度是多少，那么你就定义多少rpx，也就是 1px = 1rpx
例如：设计稿640px宽度
那么很遗憾，你需要转换一下 1px = 750/640 rpx
也有小伙伴想在小程序中使用rem，小程序中如何继续使用rem 例如：设计稿750px宽度
此时1rem = （750/20）rpx = 37.5px
例如：设计稿640px宽度
此时1rem = （640/20）rpx = 32px
注意：无论设计稿多少，rem与rpx换算总是一样的，但是rem与px在小程序中换算是 rem = 设计稿宽/20，这一点与我们平时使用的rem完全不一样。
三、用Scss，仅使用vw作为CSS单位

//iPhone 6尺寸一倍图作为设计稿基准 $vw_base: 375; @function vw($px) { @return ($px / 375) * 100vw; }

【设计稿和前端】无论是文本还是布局高宽、间距等都使用 vw 作为 CSS 单位

.mod_nav { background-color: #fff; &_list { display: flex; padding: vw(15) vw(10) vw(10); // 内间距 &_item { flex: 1; text-align: center; font-size: vw(10); // 字体大小 &_logo { display: block; margin: 0 auto; width: vw(40); // 宽度 height: vw(40); // 高度 img { display: block; margin: 0 auto; max-width: 100%; } } &_name { margin-top: vw(2); } } } }