浅谈如何实现响应式布局以及rem布局原理

响应式布局概念

响应式布局就是可以让网站同时适配不同的手机端和不同的分辨率，可以让用户有更好的体验

一：响应式布局实现的方式有几种（5）

1. 第一种： 百分比布局

• 所谓的百分比布局其实就是对属性设置来实现让网站适配不同的手机端分辨率，但是百分比布局是相对于父元素来说的 ，我们可以设置的属性有（margin,padding,height,width） 对于HTML元素中的（font-size ,border）是无法设置的

2. 第二种：媒体查询

• 媒体查询就是设置不同分辨率下的css样式从而适配不同的手机端，媒体查询相对于百分比来说。更为细致的调整，但是有一个缺点就是在ite8以下不起作用
  -第三种： rem布局
  rem布局就是HTML页面元素中的font-size值 来设置大小的这里我们有两种事项方式

3. rem布局

所谓 rem单位布局就是根据HTML的font-size的大小 来设置计算的 有两种实现方式

• 第一种 媒体查询
  媒体查询就是设置不同分辨率下的font-size值
• 第二种 根据js动态计算赋值
  -利用HTML的font-size来动态赋值 但是有一个缺点就是 页面打开的时候 元素的打开的时候会有一个变化的过程
  代码如下：

在这里插入代码片
   function rem() {
   //页面元素的font-size值等于
        document.documentElement.style.fontSize =
        //页面的宽度除于一个自定义 的 数值转换成px单位
            document.documentElement.clientWidth / 15 + 'px'
    }
    rem();
//   onresize就是说页面在方法缩小时候 会有均一尺寸
    window.onresize = rem;

4. vm布局

根据PSD文件宽度或高度作为标准，元素单位px转换为vw或vh，比如f ont-size:12px，PSD文件宽度375，转换公式12*100/375，则样式改为f ont-size:3.2vw，

5. 弹性盒子布局

利用（flex）来实现弹性盒子的布局

二：rem布局的原理

rem 是相对于根元素的字体大小计算值的倍数 使用到js来动态改变html标签的字体大小，其他的rem单位的数值就会被浏览器动态计算转换为px单位

*** 好了 今天的分享就到这里 以上来自于小编个人的理解 欢迎补充