px :以像素为单位。 受到分辨率的影响。
rpx :小程序的像素单位。 配合画面的宽度进行了调整,所以很放心。
(em )相对单位;相对父代)。 1em=16px
rem :相对单位(相对html标记)。 响应表达式以设备的html像素大小完成。 其实是等比变焦。
vw、vh :以百分比为单位。 1vw=1%宽,1vh=1%高。 因为各个屏幕的宽高比不同,所以偶尔会将其用于合身。
媒体查询:根据屏幕宽度加载不同的css,以达到响应拟合的目的。
@ mediascreenand (最小宽度:600 px ) and (最大宽度3360900 px ) body ) background-color:#f5f5f5; }常见的响应时间布局方法:
1、使用媒体查询。 这种方法的优点是定制程度高,但创建“另一个CSS”需要花费很多精力
2、使用rem。 这个其实是放大了,但是网站还是原来的样子。
3 )使用网格布局。 使用网格布局和媒体查询。 可以完成美丽的有响应性的布局。 这个布局设计、体系结构是为了节约很多适应性很强的代码而写的。