关于css:设计稿和前端

内容不断更新中，可能存在知识点谬误，欢送斧正

先来看一些概念：

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 齐全不一样。