现在有一个web网页，要做适配移动端，请教一下思路

Question

如题，提一次涉及到移动端的开发，现在做的那个web网页在开始的时候就只是针对pc的没有考虑移动端；现在要做移动端，移动端的多屏幕适配我准备用rem，是不是我要写两套css来完成pc和移动端，因为我的css最后是打包成一个文件的，怎么去判断该加载哪个呢？求教思路。。

Answer 1

大体上来说，适配移动端并不复杂，基础思路就三条：

1. 通过 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> 告诉浏览器你的网页在移动设备上如何渲染
2. 使用流式布局，不强制指定元素的宽高，使得它更容易在不同分辨率下渲染
3. 使用媒体查询 @media 来适配不同分辨率

建议你这么做：

1. 使用一些响应式的框架降低开发成本，比如 Bootstrap
2. 通过观摩响应式网页在不同端的表现学习做法，参考 Bootstrap theme
3. rem 也好，vw 也好，其实是最细枝末节的小技巧，大概看一眼就行。（实际上，我反对 rem，我觉得就应该 @media + px）

Answer 2

如果你要写两套css，可以通过user-agent判断当前的设备，分别加载不同页面或者css文件
不过方便的话，还是通过CSS @media 这样的特性来处理响应式布局。