4.移动端适配如何解决#

1. 背景#

公司项目需要支持PC和移动端

2. 方案#

• 根据不同的端来开发不同的页面(成本最高)
• 根据不同的端来加载不同的css样式
• 根据响应式，来运行不同的样式规则
• style预处理器来做

考虑的问题：

1. 设置视窗，通过元信息配置meta

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2. 掌握媒体查询

@meida (min-width:780px) and (max-width:1024px){
	boby{
		font-size:18px;
	}
}

3. 弹性布局

• flex布局
  • 主轴对齐
  • 对齐方式
  • 弹性属性

4. 图片响应式

<picture>
	<source srcset="image-large.jpg" media="(min-width:800px)">
	<source srcset="image-mei=dium.jpg" media="(min-width:400px)">
	<img src="image-small.jpg" alt="Responsive Image">
</picture>

5. rem单位

rem单位的基础值由html的font-size决定

6. em单位

相对于父级字体高度