移动端适配样式问题 html，css

html-css013

移动端适配样式问题 html，css,第1张

1，设置html，同时还设置body的字体大小，目的是为了兼容。不同浏览器确实支持的不一样。

2，我建议你不要特别纠结此时的div和html{font-size}的关系，因为即使是一个公司出的同一个浏览器不同版本都存在兼容问题，你如果要设置div为某个特定的值，就明确设定一下。

首先了解下px，em，rem的区别

px（像素）是绝对单位，页面按精确像素展示，使页面较稳定和相对固定一些。但这种方法存在一个问题，用户在浏览我们制作的web页面时，如果他改变了浏览器的字体大小，或是缩放、放大页面，这时会使页面布局被打乱。

em是相对单位，基准点为父节点字体的大小。上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。

例如con2的父元素为con1，css中<strong>con1</strong>和<strong>con2</strong>的font-size都设置为2em；

可以看得出con1和con2的font-size样式都是2em，但是展现出来的字体大小不一样,因为默认情况下没有对字体进行重新设置的话，浏览器默认字体为16px，con1的2em就相当于32px，那么con2的2em就相当于con1的两倍也就是64px，所以con2字体比con1的大。

rem是相对于页面根元素的大小单位，我们只需给页面的根元素设置一个参考值，就可以在页面中根据参考值设置其他元素的大小，rem不会出现嵌套的繁琐。

设置html下1rem=10px

可以看得出1rem就是12px（浏览器下最小的字体为12px，当设置小于12px的字体，也默认为12px）

无论元素处于哪一层，都不会受到父元素的影响。