rem响应式布局

                

如果移动端页面只在移动端访问，那么使用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单位