css-移动端适配

二倍图

我们写代码都是按照逻辑像素来写的。

应该按照设计图的一半大小来写代码，不然会失真。

视口

三种视口：

* 布局视口：手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。

* 视觉视口：用户正在看到的网站的区域，与设备屏幕一样宽。

* 理想视口：设备多宽，网页多宽。使用meta声明

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

flex布局

写在父类，只针对亲子类

主轴对齐方式

justify-content: flex-start    //默认起点开始依次排列
justify-content: space-between //两边没有间距
justify-content: space-around  //两边有间距2倍
justify-content: space-evenly  //间距相等
justify-content: center        //沿主轴居中排列

侧轴对齐方式

align-items:stretch  //默认效果，盒子被拉伸至铺满容器
align-items:center	 //沿侧轴居中排列

伸缩比

把父盒子分成若干份，每个子盒子各占几份

1.flex：1 //给子盒子加

2.分配父级剩余的空间

圣杯布局

左右两边大小固定不变，中间宽度自适应

两侧盒子写固定大小

中间盒子flex：1，沾满剩余空间

改变主轴方向

flex-direction: column;

背景精灵图 调二倍图

background-size:x auto;

强制弹性盒子换行显示

flex-wrap:wrap;
//多行侧轴对齐方式使用align-content

移动适配

flex实现布局，但不能完全自适应

• rem : 目前多数企业在用的方案，比如小米
• vw/vh : 新趋势，比如b站

rem

原理：通常将整个设备屏幕==宽度==分成10份，布局等比例缩放

@media (width:320px){
	html{
		font-size:32px;
	}
}
	//1rem=32px
@media (width:480px){
	html{
		font-size:48px;
	}
}
	//1rem=48px

通过媒体查询太麻烦，目前使用flexible.js来实现

vw/vh

原理：通过视口实现在不同宽度的设备等比例缩放（1/100视口）

因为混用可能导致变形，一般只使用vw