移动端前端适配方案对比

最近抽空看了看移动端适配的一些文章，也结合自己的经验做一下总结以及对比。

那么，开始正题，首先说说到目前位置出现的一些关于移动端适配的技术方案：

• 通过媒体查询的方式即CSS3的meida queries
• 以天猫首页为代表的 flex 弹性布局
• 以淘宝首页为代表的 rem+viewport缩放
• rem 方式

Meida Queries

meida queries 的方式可以说是我早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

mobile-fe1.gif

声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。

• 上一篇： 移动端高清、多屏适配方案
• 下一篇： 移动端页面适配———多方案解析