内容不断更新中，可能存在知识点错误。欢迎纠正一些概念：CSS相对长度单位：px，像素em，元素字体高度%，百分比rem，根元素字体-sizevm，窗口宽度，1vw=窗口宽度的1%vh，窗口高度，1vh=1%的windowheightCSSpixelpx：CSS像素的单位也叫px。它是图像显示的基本单位，既不是一个确定的物理量，也不是一个点或一个小方块，而是一个抽象的概念。所以在谈论像素时一定要理解上下文！为了确保一致的阅读体验，CSS可以在不同设备之间自动调整。即一个码可以在不同尺寸的设备之间显示，保证阅读体验的一致性。默认情况下，一个CSS像素应等于一个物理像素宽度。但在高PPI设备上，CSS像素即使在默认情况下也相当于多个物理像素尺寸。例如，iPhone的屏幕会比普通手机的屏幕看起来更细腻、更清晰。在浏览器上，可以通过ctrl+/-放大或缩小屏幕，其实就是屏幕分辨率的降低/提高。ctrl+屏幕放大，分辨率降低。iPhone6、7、8都是双屏手机，即1个CSS像素等于2个物理像素。iPhone6Plus等为三屏手机，1个CSS像素等于3个物理像素。如果我们要以px来写，以iPhone6为例，设计稿给出了一张宽高为40px??40px的图片。实际开发中应该除以2，宽高写成20px??20px。因为iPhone6是一款双屏手机。早年开发和UI设计沟通的问题，主要是因为当时是px的方案，尺寸需要除以2。在实际开发中，设计师可能会给我们两个草稿，一个是iphone6的375双稿，还有一个是web的750双稿。1.首先，为什么我没有做单位，原因是像素的概念太多了。事实上，他们中的一些人经过培训甚至无法理解UI，因为他们不知道如何适配前端。他们只需要注意大小和倍数。2、首先普及一下几个概念。像素比较重要，逻辑像素pt，物理像素px（pt和px的关系是1pt中有几个物理像素）和视口像素（逻辑像素在浏览器内部重新处理）的结果，也就是css中的px，默认css的1px是1个物理像素，但会随着设备的变化而变化）。逻辑像素与物理像素的比值是dpr倍，也就是常说的倍数。3、蓝湖上传设计稿时，假设设计师是在750稿上做设计的，上传时会选择ios@2x上传。这时候打开蓝湖看到的ios大小是375pt逻辑像素，还是图片大小的1倍。当我们打开像素选择时，它会变成750px。这时候蓝色湖中代表的px其实就是一个物理像素。4.但是如果设计师上传的是375设计稿，上传的时候会选择ios@1x上传。此时蓝湖的大小还是开发者开蓝湖时的1倍。我们打开像素选择，它是375px。这时候px还是物理像素的概念，但是如果要使用必要的像素??2，BlueLake会帮我们转换和设置。（因为iphone6设备的逻辑像素是375??667，但是它的物理像素是750??1334）5.web开发的时候，前端开发的时候如何在不同尺寸的手机之间做比例缩放，我没接触过IOS开发，目前只考虑web项目和小程序项目，使用对应的rem和rpx，viewportwidth=device-width。（viewportwidth=device-width是什么意思？其实就是让设备的物理宽度等于页面宽度的意思）6.全局的cssvw/vh方法后面会介绍。1、在WEB端，我们会对rem和flex的结合感到疑惑。比如我们拿到设计师的双图，如果我们把对应的pxsize/2全部应用到宽度为750px/2的移动端页面的css上，结果会怎样？其实它也会实现缩放适配，因为css中的px也是一个相对长度单位，是一个根据物理像素/逻辑像素的值而变化的值，但是px的缩放适配不明显，不很好的体现了手机上不同尺寸切换的效果，所以推荐使用rem。（后面可以实验）介绍使用rem配合flex实现。rem布局非常简单。其基本原理是根据不同的屏幕分辨率动态修改根字体的大小，使所有以rem为单位的元素随屏幕大小一起缩放，从而达到自适应的效果。设计稿按照iphone6设计（iphone6实际宽度为375px），设计稿宽度为750px。早年是直接把整个size除以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//iphone5deviceWidth=375,font-size=375/7.5=50px//iphone678XdeviceWidth=414,font-size=414/6.4=55.2px//iphone678plus所以设计思路是根据设计稿将html的font-size设置为100px。例如，对于750个物理像素的设计稿，将其除以7.5。只需将设计稿的大小除以100，转换非常方便。优化：如果像上面这样设计，会无限放大，在大屏幕上很难看。解决方法是限制根元素的最大和最小字号，body也增加最大和最小宽度限制，可以提升用户体验。html{//设置根字体大小单位为vw，页面元素大小单位为rem。使用vw和rem，可以根据视口更改布局。字体大小：calc(100vw/7.5);//同时，通过MediaQueries限制根元素字体最大和最小@mediascreenand(max-width:320px){font-size:64px;}@mediascreenand(min-width:540px){font-size:108px;}}//body还增加了最大和最小宽度限制，以避免默认的100%宽度块元素跟随body太大或太小body{max-width:540px;最小宽度：320px；}#app{字体大小：初始；//重新设置页面的字体大小，恢复到浏览器默认的16px，否则显示为50px}有时候我们得到375iphone6的双图，怎么设置呢？只需将设计稿的大小除以50即可。但是有时候还是会得到640张图片，那时候怎么换算，我们用scss变量//rem单位换算：75px只是为了方便计算，750-75px,640-64px,1080-108px等等$vw_fontsize:75px;//iPhone6size参考根元素大小（这个值是可变的）@functionrem($px){@returncalc(($px/$vw_fontsize)*1rem);}//根元素大小使用vw单位$vw_design:750px;//这个变量值不变html{font-size:calc(($vw_fontsize/($vw_design/2))*100vw);//同时通过MediaQueries限制根元素的最大值和最小值@mediascreenand(max-width:320px){font-size:64px;}@mediascreenand(min-width:540px){font-size:108px;}}//body同时增加最大和最小宽度限制，以避免默认的100%宽度块元素跟随body太大或太小。正文{最大宽度：540px；min-width:320px;}要知道，rpx试图在750个物理像素下恢复1rpx=1个物理像素的比例。当我们切换移动设备时，移动设备的物理像素会发生变化，小程序内部会有算法计算出当前rpx值与屏幕实际物理像素的比值。比如在iphone5中1rpx=0.42px=0.84个物理像素。小程序中rpx和px的转换例如：设计稿的宽度是750px那么恭喜你，你的设计稿的宽度是多少，那么你就可以定义多少rpx了，即1px=1rpx比如：设计稿的宽度是640px所以很不幸，需要转换1px=750/640rpx有的朋友也想在小程序中使用rem，如何在小程序中继续使用rem例如：设计稿750px宽度在此时间1rem=(750/20)rpx=37.5px例如：设计稿640px此时的宽度1rem=(640/20)rpx=32px注意：无论有多少设计稿，rem和rpx之间的转换总是一样，但是小程序中rem和px的换算是rem=designdraftwidth/20，这和我们平时用的rem完全不一样。3、使用Scss，只使用vw作为CSS单元//iPhone6双倍尺寸图片作为设计基准$vw_base:375px;@functionvw($px){@returncalc(($px/375px)*100vw);}无论是文字、布局的高度、宽度、间距等，都使用vw作为CSS单位。mod_nav{背景颜色：#fff;&_list{显示：弹性；填充：vw(15)vw(10)vw(10)；//内部间距&_item{flex:1;文本对齐：居中；字体大小：vw(10)；//字体大小&_logo{display:block;保证金：0自动；宽度：vw(40)；//宽高：vw(40);//高度img{显示：块；保证金：0自动；最大宽度：100%；}}&_name{顶部边距：vw(2);}}}}
