移动端

20 阅读1分钟

移动端

image.png

移动端适配方案

  1. 响应式:一套代码通过响应式方案完成pc,平板,手机端的适配
  2. 单位适配:pc和平板完成响应式适配 单独制作手机端页面,通过rem vw单位完成页面适配

image.png

vw/vh

image.png

image.png

vmin/v-max

主要是用于设备旋转(如手机从竖屏转横屏)时,视口的宽高会变化,但vmin始终取当前宽高的较小值,vmax取最大值

rem

image.png

适配方案

image.png

@media (max-width: 768px) {
  body { font-size: 14px; }
}
// 加载阿里CDN的文件
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
动态修改基准值方案

image.png

image.png

响应式

image.png

image.png

响应式布局实现方案

image.png

媒体查询

image.png

bootstrap框架

image.png

栅格布局

image.png