如果移动端页面只在移动端访问,那么使用rem可以实现响应式布局
实现原理:
动态改变 html的font-size值的大小,来完成rem实现响应式布局
rem实现响应式原理:
rem 的值都是根据html的fontsize进行计算的
统一缩放元素大小,只要修改html的fontsize
html { font-size: 100px;
/* 将图片的大小变成 75*75 */
/* font-size: 50px; */}
main {
width: 1.5rem; height: 1.5rem;background-color: #f38;
}
/*省略其他的CSS样式*/
使用rem开发响应式布局步骤1:
-
从Ui设计师拿到设计稿,一般尺寸都是以iphone 6的尺寸为准 750*1334(6381136)
-
在样式中给html设定一个fontsize的值,我们一般设置一个方便后续计算的值,例如10px、100px等,我们使用100px
-
写样式
-
完全按照设计稿的尺寸来写样式,设计稿上的长度、height、margin、padding、字体的值是多少,我们就写多少,这样可以100%还原设计稿
-
注意:需要把得到的像素值/100px,转换为rem单位
-