【css】页面适配

1.认识vm,rem,em,px

• vw [ Viewport Width ]

  1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。

• px [ pixel ]。

  px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，随着Retina屏的流行，分辨率提高了,css中的1px并不等于设备的1px。

• rem[ root em ]

  rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

2.vw px rem之间的换算

假设设计稿是以1310px为标准的。那么：

100vw = 1310px

设置： 1rem = 100px（这样方便写代码的时候换算）

那么:html的根元素为x

1rem=100px=100vw/x=1310px/100px

x=100vw/13.1

所以：这时候，只要给html的根元素设置：

font-size: calc(100vw / 13.1) 即可。

3.flexible方案

4.媒体查询器

 @media not|only mediatype and (expressions) {...}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}

主要根据项目需求而定，常见尺寸有320、480、640、768、960、1024、1200等