layui移动端适配_移动端适配方案

移动端适配技术构成：

• rem
• vw ，vh
• calc（）
• media queries 媒体查询
• 百分比布局
• flex，grid
• flexible image 弹性图片

1.设置 Meta 标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.前端单位

• px
• em：一个m的宽度，就是这样，绝不是一个汉字的宽度
• pt，ex : 根本没人用
• vw：视口（viewport）宽度
• vh：视口（viewport）高度
• rem：root em 根元素即html的font-size，如果 html的font-size：16px；那么 1rem = 16px

rem 与 em 的区别：rem 参考根元素的font-size