前两天在做一个有关于问卷项目的前端开发，其中主要涉及到两方面的内容。第一个方面就是问卷需要同时涉及到pc端和手机端两个部分，更侧重与手机端的展示。第二个方面就是代码是嵌入到第三方代码中，同时需要在第三方平台投放和统计，牵扯到跨域问题。
首先说一下手机端开发遇到的一些问题和总结吧。（其实手机端有太多的点需要注意，这里只是说了一些这个项目遇到的，之后会慢慢补充）
响应式布局
因为要兼容pc端，同时是在第三方中嵌入代码，没有办法开发两套css来适应页面，所以运用了响应式布局。
实现响应式布局主要需要完成下面几个步骤：
1. 首先在head标签添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
具体的参数意义：
meta 标签的viewport属性，是在移动设备上设置原始大小，显示和是否缩放的声明。可以使用的参数设置如下∶
width ： viewport的宽度
height ： viewport的高度
initial-scale ： 初始的缩放比例
minimum-scale ： 允许用户缩放到的最小比例
maximum-scale ： 允许用户缩放到的最大比例
user-scalable ： 用户是否可以手动缩放
2. 设置媒体检测
PC端：
@media screen and (min-width:1280px) {
#head { … }
#content { … }
#footer { … }
}
手机端：
@media screen and (min-width:320px) and (max-width: 414px){
}
3. 宽度需要使用百分比
同时，元素尽量不要使用absolute，使用的话在外面套一层relative
4. 设置文本，使用em或rem
html {
font-size: 62.5%;
}
div {
font-size: 1rem;
}
原理：
浏览器约定：1em = 16px
em是相对于父元素的大小
rem是相对于根目录的大小
为了改变1em = 16px的对应关系，因此设置html {font-size: 62.5%}，这样之后的设置就可以按照1em = 10px的关系来换算了。
rem的原理是一致的，只不过rem的便捷性在于它是相对于根目录的字体大小来决定的，不会因为父元素的大小改变而改变。
rem兼容性：（ie9.0+，firefox，chrome都支持了，如果不考虑兼容低版本ie就可以使用，恰好我们的项目不需要）
未完待续。。
p.s. 非常感谢@流云诸葛的简单的3步设置，让你的博客园更漂亮！的博文，借用了一下里面的css。