关于html+css布局移动端网页
新手开发移动端网站遇到的适配问题，随意看看就好哈：
1、不同的手机屏幕会出现布局错乱的现象；比如盒子高度溢出、盒子跳行之类、图片变形的情况
2、字体大小不会随着屏幕的变化而变化，在大屏幕上面的字体合适，在小屏幕上面显得很大；
解决方法：响应式布局，高度和字体的大小的单位不用PX;因为px是固定的，这时候用rem，跟随不同屏幕的大小字体和高度响应式变化;当然宽度的话用百分比就好；
3、关于rem;
rem是css3新增的一个相对单位；是相对于根节点的一个单位（也就是html节点）；
例如：html{font-size:16px;};
p{font-size:1rem;}--->p标签的大小就是1x16px=16px;
一 、第一种解决方法
要做到响应式的变化，需要在css里面加入下面这一段代码；表示不同大小的屏幕的根元素的大小不一样；
@media screen and (min-width: 320px) {
html,body {font-size: 14px;}
}
@media screen and (min-width: 360px) {
html,body {font-size: 16px;}
}
@media screen and (min-width: 400px) {
html,body {font-size: 18px;}
}
@media screen and (min-width: 440px) {
html,body {font-size: 20px;}
}
@media screen and (min-width: 480px) {
html,body {font-size: 22px;}
}
@media screen and (min-width: 640px) {
html,body {font-size: 28px;}
}目前除了IE8以及更早的浏览器以外，几乎所有的浏览器都支持rem；对于不支持的浏览器设置绝对单位；例如：
p {font-size:14px; font-size:.875rem;}以上是个人初次开发移动端网页遇到的布局问题。
----说到这说一说em
em:em是相对长度单位；相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸没有被设置，则相对于浏览器的默认字体；一般浏览器的默认字体为16px；1em=16px;一般为了换算方便，就设置为body{font-size:62.5%;}-->body的字体为10px;
em的特点：值不是固定的,会继承父元素的字体大小；例如：父元素的字体大小设置为1.2em;子元素的字体大小如果也想这么大，那么就设置为1em，这是因为继承性；
二、第二种方法
用javascript控制获取到移动设备的宽度、控制不同设备的字体的大小
例如：(function() {
// 获取到html文本
var oHtml = document.getElementsByTagName("html")[0];
console.log(oHtml);
// 获取到设备的宽度
var oScreenWidth = oHtml.getBoundingClientRect().width;
// 获取到设备的固定的html文本字体大小
oHtml.style.fontSize = oScreenWidth / 16 + 'px';
console.log(oHtml.style.fontSize);
})();
元素的大小就以rem来控制