前端第22天–rem布局
rem 和 em
rem:font size of the root element,rem是相对于根元素来设置字体大小的,这就意味着,我们只需要根据自己的需求在根元素确定一个参考值。
em:以使用em为单位的元素本身的font-size大小为参考点,标准不统一,容易造成混乱
浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。
因为要做响应式所以才用em、rem,让图片啥的和根元素大小关联。
因为要考虑各个大小视口响应才用vw、vh
思路:让font-size等于XXXvw,这个XXX是100和屏幕宽度px相除后的结果,是1px=多少vw。
这样可以通过调整根元素控制其他元素,也可以根据视口大小做响应。
只用vw,没法和根元素产生互动。
只用rem,没法和视口产生互动。