新手开发移动端网站遇到的适配问题，随意看看就好哈：

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来控制