移动端开发的各种方案及优劣

[yoowinsu]

一般情况下主流的网站会有以下两种方案：

一个网站两套代码

想百度、淘宝、京东等一些大型网站都有独立的web移动端页面，这种方案是后端根据用户的user-agint来判断加载哪一套代码

媒体查询、栅格系统、flex、百分比等

这种是比较常见的解决方案，一般也都是相互结合的场景

百分比布局

• 兼容性比较好
• 对于要求宽高等比的布局是不适合的

媒体查询

• 媒体查询一般放到后面
• 媒体查询有重叠的部分，后面会把前面的覆盖掉
• 媒体查询的选择器权重低的话是不能覆盖其他权重高的代码
• 针对苹果手机DPR不同用不同的样式

  <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

• 横屏和竖屏用不同的样式（一般适用于web游戏，竖屏时候提醒用户只能在横屏下使用）

  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

REM

栅格系统